为了方便输入，需要自动获取焦点，所以加入了autofocus，但是发现，只有第一个并且第一次点击才起作用。
查了网上的一些文档，说是跟dom的渲染顺序和数据的缓存有点儿关系，至于深层次的原因，还没查到，希望有知道的朋友，不吝告知。
然后使用了Vue提供的自定义指令来解决，还有一点儿需要注意，el-input在页面渲染后，外层是个div，需要拿到里面的input才会有效果。
<el-input v-focus></el-input>
directives: {
// 注册一个局部的自定义指令 v-focus
focus: {
// 指令的定义
inserted: function (el) {
// 聚焦元素
el.querySelector('input').focus()
}
}
},
--------------------- 转自
作者：渡一
来源：CSDN
原文：https://blog.csdn.net/qq_40523572/article/details/83583302
为了方便输入，需要自动获取焦点，所以加入了autofocus，但是发现，只有第一个并且第一次点击才起作用。查了网上...
Q1. el-input 获取焦点 Q2. dialog中的 el-input获取焦点 Q3. dialog中有...
HTML： js： 如果在项目中使用官方的例子时，input不能自动获取焦点，使用简化时可自动获取焦点，查询相关资...
自动获取焦点 方式一：dom版 方式二：通过自定义指令获取焦点自定义指令通过Vue.directive()创建，它...
自定义指令 示例，文本框自动获取焦点 自定义全局指令 使用 Vue.directive() 定义全局指令。 和样式...
焦点管理 在Flutter中TextField使用FocusNode管理焦点 获取、取消焦点： 取消所有焦点 不使...
vue实现一个input获取焦点是去焦点，实现label的放大缩小效果 效果图 实现思路 当前input获取焦点的...
需求场景：当我点击搜索栏，跳转至搜索页时，当页面加载成功之后，input标签能自动获取焦点（手机端，自动获取焦点，...
这里是代码区域 这是没有在form标签里面的 自动获取焦点的input 自己测试发现 自动获取焦点属性并不需要...
本文标题：Vue 中使用 el-input 自动获取焦点和二次获取焦点问题
本文链接：https://www.haomeiwen.com/subject/rsceoqtx.html
网友评论