vue3输入框生成的时候如何自动获取焦点详解

要让 Vue3 中的输入框在生成后自动获取焦点，需要使用 ref 和生命周期钩子函数。

1. 在 HTML 模板中添加输入框和 ref：

<template>
  <div>
    <input ref="inputRef" type="text">
  </div>
</template>

1. 在 script 标签中定义 ref 对象和 mounted 钩子函数：

<script>
  import { ref, onMounted } from 'vue';

  export default {
    name: 'InputDemo',
    setup() {
      const inputRef = ref(null);

      onMounted(() => {
        if (inputRef.value) {
          inputRef.value.focus();
        }
      });

      return {
        inputRef
      };
    }
  };
</script>

1. 在 mounted 钩子函数中判断 ref 是否存在，如果存在，则调用 focus() 方法将输入框设置为焦点。

示例 1：单个输入框自动获取焦点

<template>
  <div>
    <h2>自动获取焦点示例</h2>
    <input ref="inputRef" type="text">
  </div>
</template>

<script>
  import { ref, onMounted } from 'vue';

  export default {
    name: 'InputDemo',
    setup() {
      const inputRef = ref(null);

      onMounted(() => {
        if (inputRef.value) {
          inputRef.value.focus();
        }
      });

      return {
        inputRef
      };
    }
  };
</script>

示例 2：多个输入框自动获取焦点

<template>
  <div>
    <h2>多个输入框自动获取焦点示例</h2>
    <input ref="inputRef1" type="text">
    <input ref="inputRef2" type="text">
    <input ref="inputRef3" type="text">
  </div>
</template>

<script>
  import { ref, onMounted } from 'vue';

  export default {
    name: 'InputDemo',
    setup() {
      const inputRef1 = ref(null);
      const inputRef2 = ref(null);
      const inputRef3 = ref(null);

      onMounted(() => {
        if (inputRef1.value) {
          inputRef1.value.focus();
        } else if (inputRef2.value) {
          inputRef2.value.focus();
        } else if (inputRef3.value) {
          inputRef3.value.focus();
        }
      });

      return {
        inputRef1,
        inputRef2,
        inputRef3
      };
    }
  };
</script>

在多个输入框的示例中，需要对每个输入框都定义一个 ref 对象，并在 mounted 钩子函数中判断每一个 ref 是否存在，以确保只有一个输入框被设置为焦点。