在vue项目中引用element-ui时 让el-input 获取焦点的方法
2024-08-31 09:06:48
在制作项目的时候遇到一个需求,点击一个按钮弹出一个input输入框,并让输入框获得焦点,项目中引用了ElementUI
在网上查找了很多方法,
但是在实际使用中发现了一个问题
无论是使用$ref获取input元素然后使用focus方法
还是使用饿了么组件自带的autoFocus
都只有在第一次点击按钮的时候可以让Input获得焦点,在不刷新页面的情况下,第二次以后的按钮点击都不会让Input获得焦点。我到现在也没有搞明白这是为什么,猜测了一下是存才一个全局变量,当我们第一次使Input获得焦点以后改变了这个预设变量的值,在Input失去焦点的时候并没有将这个值重置,所以导致了后面的问题。
废话不多说,
下面是当同时使用Vue和el-input的时候的解决方案。
Vue本身提供了自定义指令的方法
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', function (el) {
el.focus()
})
这样使我们在组件中可以自用的调用v-focus方法,给他绑定定义布尔变量来控制元素是否获得焦点
但是这里要注意的是组件<el-input>本身在页面中渲染成了一个div元素
所以我们要在<el-input>被绑定为v-focus的同时
在自定义指令中获取组件下通过querySelector()方法获取input元素
<el-input
v-model.trim="searchFor"
@blur="blurSearchFor"
v-focus="blurFocus">
</el-input>
Vue.directive('focus', function (el) {
el.querySelector('input').focus()
})
原文地址:https://segmentfault.com/a/1190000014164763
最新文章
- java开发环境搭建
- 微型orm fluentdata
- EF相关知识
- ORCHARD中文文档(翻译)
- Oracle 基础 导入数据库 删除用户、删除表空间、删除表空间下所有表
- Unity3d,OnMouseDown()不执行的原因总结
- java@ What are C++ features missing in Java
- hdoj3351-stack
- [Angular 2] Get start with Firebase
- 几个强大的oracle自带函数,可根据日期算年纪,根据数值匹配字段
- Hdu1095
- 由于losf引起的pxc启动报错处理
- html文本encode后,js获取参数失败的bug
- 剑指Offer——咪咕笔试题+知识点总结
- solr查询工作原理深入内幕
- LeetCode - 804. Unique Morse Code Words
- ABAP 内表访问表达式的性能
- node.js的
- Git创建本地仓库并推送至远程仓库
- jquery訪问ashx文件演示样例