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使用 - 表单验证等场景可能需要结合业务逻辑控制焦点
以上方法可以根据具体需求选择使用，自定义指令的方式提供了最好的复用性和灵活性。
