vue实现默认焦点

设置默认焦点的方法

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

使用autofocus属性 在HTML元素上直接添加autofocus属性，这是HTML5提供的原生功能。适用于简单的静态场景。

<input type="text" autofocus />

使用v-focus自定义指令 通过Vue的自定义指令实现更灵活的控制。适用于需要动态控制焦点的场景。

// 全局注册指令
Vue.directive('focus', {
  inserted: function (el) {
    el.focus()
  }
})

// 组件中使用
<input v-focus />

使用ref和$nextTick 在组件挂载后通过ref获取DOM元素并设置焦点。适用于需要等待DOM渲染完成的场景。

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

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

使用生命周期钩子 在mounted或created钩子中直接操作DOM。适用于简单的组件内操作。

mounted() {
  document.getElementById('myInput').focus()
}

注意事项

• 移动端浏览器可能对自动聚焦有限制，需要测试兼容性
• 弹窗或动态内容中的焦点设置可能需要配合$nextTick使用
• 表单验证等场景可能需要结合业务逻辑控制焦点

以上方法可以根据具体需求选择使用，自定义指令的方式提供了最好的复用性和灵活性。