Vue使用el-input自动获取焦点和二次获取焦点问题及解决
短信预约 -IT技能 免费直播动态提醒
使用el-input自动获取焦点和二次获取焦点问题
最近，碰到一个问题，就是输入框旁边有一个编辑按钮，点击时，才可以对输入框进行编辑：
要实现的效果：
为了方便输入，需要自动获取焦点，所以加入了autofocus，但是发现，只有第一个并且第一次点击才起作用。
查了网上的一些文档，说是跟dom的渲染顺序和数据的缓存有点儿关系，至于深层次的原因，还没查到。
然后使用了Vue提供的自定义指令来解决，还有一点儿需要注意，el-input在页面渲染后，外层是个div，需要拿到里面的input才会有效果。
<el-input v-focus></el-input>
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
// 聚焦元素
el.querySelector('input').focus()
}
}
},
还有一种解决方案，是使用 Vue.nextTick() 和 Ref去做，例子就不去写了，都是去操作dom的。
使input和el-input自动获取焦点的处理
【普通input的自定义指令操作】：先在入口文件注册一个全局自定义指令
// main.js
Vue.directive('focus', {
inserted (el, binding, vnode) {
// 聚焦元素
el.focus()
}
})【普通input的自定义指令使用】：v-"+指令名"
// index.vue
<input v-focus placeholder="因为有v-focus,所以我聚焦了" />【el-input的自定义指令操作】：先在入口文件注册一个全局自定义指令
// main.js
Vue.directive('fo', {
inserted (el, binding, vnode) {
// 聚焦元素
el.querySelector('input').focus()
}
})【el-input的自定义指令使用】：v-"+指令名"
// index.vue
<el-input v-fo placeholder="因为有v-fo,所以我聚焦了"></el-input>总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
