vue 实现 input focus

实现 input focus 的方法

在 Vue 中实现 input 元素的 focus 可以通过多种方式完成，以下是几种常见的方法：

使用 ref 和 $refs

通过 ref 属性获取 DOM 元素，然后在 mounted 或 methods 中调用 focus 方法。

<template>
  <input ref="inputRef" />
</template>

<script>
export default {
  mounted() {
    this.$refs.inputRef.focus();
  }
}
</script>

使用自定义指令

可以创建一个自定义指令来自动聚焦 input 元素。

<template>
  <input v-focus />
</template>

<script>
export default {
  directives: {
    focus: {
      inserted(el) {
        el.focus();
      }
    }
  }
}
</script>

使用 Vue 3 的 Composition API

在 Vue 3 中，可以使用 Composition API 和 ref 实现 input focus。

<template>
  <input ref="inputRef" />
</template>

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

export default {
  setup() {
    const inputRef = ref(null);

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

    return {
      inputRef
    };
  }
}
</script>

动态触发 focus

通过方法动态触发 input 的 focus，适用于需要条件触发的情况。

<template>
  <input ref="inputRef" />
  <button @click="focusInput">Focus Input</button>
</template>

<script>
export default {
  methods: {
    focusInput() {
      this.$refs.inputRef.focus();
    }
  }
}
</script>

结合 v-model 使用

在需要结合数据绑定时，可以通过 v-model 和 ref 实现 focus。

<template>
  <input v-model="inputValue" ref="inputRef" />
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    };
  },
  mounted() {
    this.$refs.inputRef.focus();
  }
}
</script>

注意事项

• 确保 DOM 元素已经渲染完成后再调用 focus 方法，通常在 mounted 生命周期钩子中执行。
• 在 Vue 3 中，使用 Composition API 时，确保在 onMounted 钩子中调用 focus。
• 自定义指令可以复用，适合在多个地方需要自动聚焦的场景。

以上方法适用于大多数 Vue 项目，可以根据具体需求选择合适的方式实现 input focus。