Vue 中使用 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的。
————————————————
版权声明：本文为CSDN博主「PandaSong33」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_40523572/article/details/83583302

Vue 中使用 el-input 自动获取焦点和二次获取焦点问题相关推荐

input取消焦点 vue_vue中，页面上的input框自动获取焦点及二次获取焦点问题
需求:点击button按钮,录入成功后,页面上的input框自动聚焦,快速进行下一次录入,提高效率开始尝试了几种方法都没有成功一.首先想到的用vue指令 v-focus,然而没有成功 v-mode ...
vue中监听input框获取焦点，失去焦点的问题
一.背景博主之前在用vue的获取焦点,失去焦点的时候,出现了@blur和@focus无效的情况.当时百思不得其解.今天又在写vue页面的时候,突然@blur和@focus又好用了.emmmm,看来这 ...
Vue中实现输入框Input输入格式限制
Vue中实现输入框Input输入格式限制 1.使用修饰符实现数字输入在VUE中可以在v-modal后添加修饰符的形式来限制输入,比如: <input v-model.number=" ...
解决input自动获取焦点的问题
如果不想让input一开始就自动获取焦点. 解决方案:设置 tabindex="-1"即可 <input type="submit" name=" ...
vue中进入页面，自动触发一次点击事件
vue中进入页面,自动触发一次点击事件 html script 一进去页面,我肯定是要进去就能看到数据,而不是需要点击选项1才得到数据,解决办法就是直接在created()中调用 html <d ...
vue input自动获取焦点的方法
在移动端输入框想自动获取焦点(自动弹出输入法) 我是在 uitls 文件下面 index.js 注册全局的指令 import Vue from 'vue' // 注册一个全局自定义指令 v-focus ...
vue 中的el表达式_Vue中vue.filter()的使用方法介绍（过滤）
本篇文章给大家带来的内容是关于Vue中vue.filter()的使用方法介绍(过滤),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. Vue过滤器 {{msg |msgFormat}} ...
vue中阻止表单自动提交
有时候我们在用vue项目时,肯定会遇到这样的问题,业务中需要用到form,但是点击提交按钮会触发form的默认提交,如果用在form上绑定return false,需要单独写验证函数和接收到数据后对数 ...
input自动获取焦点弹出键盘
原文链接 <template><view><input type="search" placeholder="搜索商品" plac ...

Vue 中使用 el-input 自动获取焦点和二次获取焦点问题

Vue 中使用 el-input 自动获取焦点和二次获取焦点问题相关推荐

最新文章

热门文章