vue 实现获取焦点

实现获取焦点的方法

在 Vue 中实现获取焦点可以通过多种方式完成，以下是几种常见的方法：

使用 ref 和 focus 方法

通过 ref 属性获取 DOM 元素，并调用其 focus 方法实现焦点获取。

<template>
  <input ref="inputRef" type="text" />
  <button @click="focusInput">获取焦点</button>
</template>

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

使用 v-focus 自定义指令

通过自定义指令 v-focus 实现自动获取焦点。

<template>
  <input v-focus type="text" />
</template>

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

使用 autofocus 属性

HTML5 提供了 autofocus 属性，可以直接在元素上使用。

<template>
  <input autofocus type="text" />
</template>

结合生命周期钩子

在组件挂载后通过 mounted 钩子获取焦点。

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

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

使用第三方库

如果需要更复杂的焦点管理，可以使用如 vue-focus 等第三方库。

<template>
  <input v-focus type="text" />
</template>

<script>
import { focus } from 'vue-focus';

export default {
  directives: { focus }
};
</script>

注意事项

• 自定义指令 v-focus 适用于需要动态控制焦点的情况。
• autofocus 属性适用于页面加载时自动获取焦点，但不适用于动态场景。
• 使用 ref 和 focus 方法是最灵活的方式，适用于大多数场景。