vue 实现获取焦点

获取焦点的方法

在Vue中实现获取焦点可以通过以下几种方式：

使用ref和原生DOM方法

在模板中为元素添加ref属性，然后在方法中通过this.$refs访问DOM元素并调用focus()方法。

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

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

使用自定义指令

可以创建一个自定义指令来自动处理焦点逻辑。

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

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

结合v-model和watch

当需要根据数据变化来触发焦点时，可以结合v-model和watch实现。

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

<script>
export default {
  data() {
    return {
      text: ''
    }
  },
  watch: {
    text(newVal) {
      if (newVal === 'focus') {
        this.$refs.inputRef.focus()
      }
    }
  }
}
</script>

在生命周期钩子中触发

在mounted钩子中自动获取焦点，适用于页面加载后需要立即聚焦的场景。

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

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

注意事项

• 确保DOM元素已经渲染完成后再调用focus方法，否则可能无效
• 对于动态生成的元素，需要在nextTick中调用focus方法
• 某些移动端浏览器可能对自动获取焦点有限制
• 自定义指令可以复用，适合多个组件需要相同焦点逻辑的场景