Vue使用el-input自动获取焦点和二次获取焦点问题及解决
更新时间：2022年12月07日 17:10:40 作者：钢铁熊猫33
这篇文章主要介绍了Vue使用el-input自动获取焦点和二次获取焦点问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
使用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>
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了vue+elementUi图片上传组件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue 按钮 权限控制，在日常项目中，会碰到需要根据后台接口返回的数据，来判断当前用户的操作权限，必须当有删除权限时，就显示删除按钮，下面我们就来了解一下具体的解决方法,需要的朋友也可以参考一下2021-12-12
这篇文章主要介绍了vue单选按钮,选中如何改变其当前按钮颜色。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
本文主要介绍了nuxt3中server routes的使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
这篇文章主要介绍了解决Antd输入框卡顿问题以及Pubsub.js的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家介绍了Vue项目的优化打包，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
这篇文章主要介绍了使用Vant完成通知栏Notify的提示操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
element ui 就是基于vue的一个ui框架,该框架基于vue开发了很多相关组件,方便我们快速开发页面,饿了么前端团队基于vue进行开发并且进行了开源 element ui 中提供全部都是封装好组件,本文给大家介绍Element UI安装全过程,感兴趣的朋友一起看看吧2024-01-01
这篇文章主要介绍了uniapp vue与nvue轮播图轮播图组件的实例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-12-12
最新评论