比如

点击入库,el-dialog弹出来,然后自动聚焦第一个输入框,当输入框有值的时候,自动跳转下一个输入框

这个需求

直接上菜:

this.$refs.lbj.focus()其实直接这么写也可以,但是关闭弹出,再次打开弹窗的时候,他不会聚焦,至于为啥,我也不懂,只有看大神解释了,
这里的lbj你要ref 输入框那里

然后去监听,这个对象的单一属性,开始消费码

lbj01,就是结束消费码的ref

搞定

然后这里解释一下为啥要用

this.$nextTick( () =>{
this.$refs.lbj01.focus()
} )

最后去网上查找资料,发现是更新dom先后顺序的问题,在vue中,并不是每次数据改变都会触发更新dom,而是将这些操作都缓存在一个队列,在一个事件循环结束之后,刷新队列,统一执行dom更新操作。

通常情况下,我们不需要关心这个问题,而如果想在DOM状态更新后做点什么,则需要用到nextTick。在vue生命周期的created()钩子函数进行的DOM操作要放在Vue.nextTick()的回调函数中,因为created()钩子函数执行的时候DOM并未进行任何渲染,而此时进行DOM操作是徒劳的,所以此处一定要将DOM操作的JS代码放进Vue.nextTick()的回调函数中。

说白了就是想要在DOM状态更新后做什么,比如聚焦等,就要用到

nextTick,你里面才是你要聚焦的代码
												

vue中输入框聚焦,自动跳转下一个输入框的更多相关文章

  1. 如何设置使chrome新标签页中打开链接自动跳转到新标签页?

    在新标签打开链接的时候这样点选 Ctrl+左键 或者 鼠标中键 或者 右键链接选择'新标签页中打开链接', 可实现出现新标签页但不自动跳转 但是这个有问题, 即, 新标签只是在背景打开, 操作后并不会 ...

  2. Vue中如何在组件内部实现一个双向数据绑定?

    假设有一个输入框组件,用户输入时,同步父组件页面中的数据. 具体思路:父组件通过props传值给子组件,子组件通过 $emit 来通知父组件修改相应的props值,具体实现如下: import Vue ...

  3. vue中的路由的跳转的参数

    vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...

  4. vue中的锚链接跳转问题

    在vue中的锚链接和普通的html不同,关于vue中的锚链接可以参考vue 中的  scrollBehavior 滚动行为. 在router.js中 //创建 router 实例 const rout ...

  5. vue中组件的data为什么是一个函数

    1. 前言 在学习vue的时候,一直纳闷一件事:组件的data数据为什么必须要以函数返回的形式,为什么不是简单的对象形式呢?遂带着问题去翻官方文档,文档中自然也写明了这么做的原因,本篇博文以官方文档给 ...

  6. ip输入框键入.或者合法数字自动选择下一个输入框效果

    <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8& ...

  7. vue中时间控件绑定多个输入框

    首先去下载laydate时间控件,引入到相应的模板中 <input type="text" val-required="" value="&qu ...

  8. vue中两种路由跳转拼接参数

    this.$router.push({name:"Home",query:{id:1,name:2}}) // 取到路由带过来的参数 let routerParams = this ...

  9. vue中,基于echarts 地图实现一个人才回流的大数据展示效果

    0.引入echarts组件,和中国地图js import eCharts from 'echarts' import 'echarts/map/js/china.js'// 引入中国地图 1. 设置地 ...

随机推荐

  1. bootstrap-switch 使用

    网址:http://www.bootcss.com/p/bootstrap-switch/ 界面设置不调用方法没成功,事件也不起作用不知道是jquery版本原因还是什么原因!,下面亲测试可以使用 $( ...

  2. Kindle2018 一周使用报告

    使用2018年年末刚刚发布的KPW有一周时间了,可以借这个机会来对这部设备做一个使用报告了. 那咱们就参考如下描述吧: 1.轻薄便携:6英寸的屏幕,11.6厘米*16.7厘米的机身尺寸,加上仅有8.2 ...

  3. F#周报2018年第50期

    新闻 Bolero: 用于WebAssembly的F#工具 Ionide-fsharp安装数量超过10万 WPF的Xaml.Behaviors类库开源 Visual Studio 2019预览版 .N ...

  4. 洛谷试炼场-简单数学问题-P1088 火星人

    洛谷试炼场-简单数学问题 A--P1088 火星人 Description 人类终于登上了火星的土地并且见到了神秘的火星人.人类和火星人都无法理解对方的语言,但是我们的科学家发明了一种用数字交流的方法 ...

  5. LUA 语言易混点

    --代码: tab1 = { key1 = "val1", key2 = "val2","val2", "val3" , ...

  6. Codeforces 1132D - Stressful Training - [二分+贪心+优先队列]

    题目链接:https://codeforces.com/contest/1132/problem/D 题意: 有 $n$ 个学生,他们的电脑有初始电量 $a[1 \sim n]$,他们的电脑每分钟会耗 ...

  7. CH 1401 - 兔子与兔子 - [字符串hash]

    题目链接:传送门 描述 很久很久以前,森林里住着一群兔子.有一天,兔子们想要研究自己的 DNA 序列.我们首先选取一个好长好长的 DNA 序列(小兔子是外星生物,DNA 序列可能包含 26 个小写英文 ...

  8. [linux] 对一个虚拟机的研究

    今天拿到了一个vmware的虚拟机硬盘镜像,是其他公司的演示产品. 启动之后是带着ubuntu字样的grub.进入系统之后也不是shell,而是一个定制的命令行.所以如果想了解细节的话,只能单独挂硬盘 ...

  9. Fiddler笔记一移动端连接

    一.下载Fiddler 百度搜索”fiddler 下载“ ,安装最新版本   二.Fiddler手机抓包原理 在本机开启了一个http的代理服务器,然后它会转发所有的http请求和响应. Fiddle ...

  10. LeetCode 590 N-ary Tree Postorder Traversal 解题报告

    题目要求 Given an n-ary tree, return the postorder traversal of its nodes' values. 题目分析及思路 题目给出一棵N叉树,要求返 ...