在vue项目中引用element-ui时让el-input 获取焦点的方法

ThinkSNS 发布于2019-08-22 16:00 / 3415人阅读

摘要：我到现在也没有搞明白这是为什么，猜测了一下是存才一个全局变量，当我们第一次使获得焦点以后改变了这个预设变量的值，在失去焦点的时候并没有将这个值重置，所以导致了后面的问题。废话不多说，下面是当同时使用和的时候的解决方案。

在制作项目的时候遇到一个需求，点击一个按钮弹出一个input输入框，并让输入框获得焦点，项目中引用了element-ui

在网上查找了很多方法，
但是在实际使用中发现了一个问题
无论是使用$ref获取input元素然后使用focus方法
还是使用饿了么组件自带的autoFocus
都只有在第一次点击按钮的时候可以让Input获得焦点，在不刷新页面的情况下，第二次以后的按钮点击都不会让Input获得焦点。我到现在也没有搞明白这是为什么，猜测了一下是存才一个全局变量，当我们第一次使Input获得焦点以后改变了这个预设变量的值，在Input失去焦点的时候并没有将这个值重置，所以导致了后面的问题。
废话不多说，

下面是当同时使用Vue和el-input的时候的解决方案。

Vue本身提供了自定义指令的方法

// 注册一个全局自定义指令 `v-focus`
  Vue.directive("focus", function (el) {
    el.focus()
  })

这样使我们在组件中可以自用的调用v-focus方法，给他绑定定义布尔变量来控制元素是否获得焦点
但是这里要注意的是组件本身在页面中渲染成了一个div元素
所以我们要在被绑定为v-focus的同时
在自定义指令中获取组件下通过querySelector()方法获取input元素

Vue.directive("focus", function (el) {
  el.querySelector("input").focus()
})

海外云主机 GPU服务器如何让项目在阿里云服务器上线 webrtc怎么实际应用在项目中 webrtc项目中的stl库在哪里 webrtc在ie中获取ip

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93957.html

VUE防抖与节流的最佳解决方案——函数式组件

摘要：案例持续触发事件时，并不立即执行函数，当毫秒内没有触发事件时，才会延时触发一次函数。也以函数形式暴露普通插槽。这样的场景组件用函数式组件是非常方便的。相关阅读函数式组件自定义指令前言有echarts使用经验的同学可能遇到过这样的场景，在window.onresize事件回调里触发echartsBox.resize()方法来达到重绘的目的，resize事件是连续触发的这意味着echarts...

OldPanda 2019-05-22 19:08 评论0 收藏0
小白的全栈开发一

摘要：小白的全栈开发一简介从新手的角度对有了解，对和有了解。希望能够帮助和我一样是全栈小白的你看过很多关于怎么搭建全栈的文章，部分可能有借鉴。因为要自己独立完成，所以开始自己的全栈之旅。分享出来我的全栈经历，并记录我的毕设进度逃。小白的全栈开发一简介从新手的角度（对vue有了解，对Koa和Express有了解。）从0开始搭建一个通过RESTful API提供数据，vue组成的单页面的...

hiyayiji 2019-06-26 17:11 评论0 收藏0
vue+element-ui实现行数可控的表格输入

摘要：的中使用包裹想要插入的，或者等元素，绑定一个的数组对象，在或者等元素使用，为该在绑定数组对象的对应属性这样就可以实现每一行的数据分别存储在绑定数组对象的不同下标数组中。新增一列时，只需要让绑定数组对象一个与先前属性一致的空对象进去。element的table中使用包裹想要插入的input，或者select等HTML元素，绑定一个的数组对象，在input或者select等HTML元...

番茄西红柿 2019-04-23 11:47 评论0 收藏0
基于element的表单渲染器 (el-form-renderer)

摘要：基于封装的表单渲染器，完整继承了的属性定义，并进行了简单扩展，从而用户能够通过使用一段预设的数据渲染出一个完整的表单。设置为可禁用所有原子表单。获取当前表单的值。基于 element-ui 封装的表单渲染器，完整继承了 element 的属性定义，并进行了简单扩展，从而用户能够通过使用一段预设的数据渲染出一个完整的 element 表单。演示地址项目地址 Usage // S...

yiliang 2019-08-22 13:57 评论0 收藏0
Vue入坑笔记

摘要：近段时间常使用开发，写点记录，避免时间久之忘了。安装教程查看是否已安装，在中输入若已安装则输出版本号。继承报错可能是文件路径问题。当和继承的不同时在文件夹内外的话，会出现该错误。近段时间常使用vue-cli开发，写点记录，避免时间久之忘了。环境 1. nodejs　　vue-cli开发基于nodejs环境，确保开发的环境中已安装了nodejs。　　安装教程 https://www....

superw 2019-08-26 12:16 评论0 收藏0