vue ios输入框自动聚焦放大 vue输入框获取焦点

在vue的v-for循环中，实现点击按钮，实现获取对应的输入框焦点。

1、通过按钮的点击事件触发函数，来使得输入框聚焦

1.1、需求：

点击按钮，实现获取对应的输入框焦点。

1.2、函数逻辑：

点击按钮，获取到目标input的dom节点，对目标input调用获取焦点方法focus()。

1.3、实例

普通情况下比较简单，下面我们要讨论的情况是：

使用vue的v-for来动态生成多个input和button的组合，使得点击每个button会聚焦其对应的input。

<template>
	<div v-for:"item in data">
  	<!--在input框中我们要做的就是设置 ref -->
  	<input :ref="item.refFocus"/>
    <button @click="switchEditState(item)">点击</button>
	</div>
</template>

<script>
	export default{
  methods: {
    switchEditState(obj) {
      // 通过对目标dom调用focus方法，实现点击聚焦到当前行的输入框
      this.$nextTick(() => {
        //注意[0]
        this.$refs[obj.refFocus][0].focus();
      });
    },
  }
</script>

Esp：在vue中用v-for循环来动态绑定:ref，在循环结束后，实际生成的是一个「ref数组」，所以若打印this.$refs[obj.refFocus，会发现结果是一个数组。而数组是无法调用focus()方法的，所以需要我们记得去通过下标访问。

---

ref的本质用法是获取本页面的dom元素，如在标签中使用ref="abc"，然后就可以通过this.$refs['abc']或this.$refs.abc获取