vue3 动态input 聚焦点

在Vue 3中，你可以使用ref和onMounted生命周期钩子来设置动态输入框的聚焦点。以下是一个简单的例子：

<template>
  <div>
    <div v-for="(item, index) in inputs" :key="index">
      <input ref="inputRef" type="text" />
    </div>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
 
const inputs = ref(['Input 1', 'Input 2', 'Input 3']); // 假设有3个输入框
const inputRef = ref(null);
 
onMounted(() => {
  inputRef.value.focus(); // 在组件挂载后聚焦第一个输入框
});
</script>

如果你想要在特定条件下聚焦某个输入框，你可以使用ref属性来区分不同的输入框，并在需要的时候调用focus方法。

<template>
  <div>
    <div v-for="(item, index) in inputs" :key="index">
      <input :ref="setInputRef" type="text" />
    </div>
  </div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue';
 
const inputs = ref(['Input 1', 'Input 2', 'Input 3']);
const inputRefs = ref([]);
 
const setInputRef = (el) => {
  if (el) {
    inputRefs.value.push(el);
  }
};
 
onMounted(() => {
  // 聚焦第二个输入框
  inputRefs.value[1].focus();
});
</script>

在这个例子中，我们使用setInputRef函数来收集所有的输入框引用，并在onMounted钩子中通过索引来聚焦特定的输入框。