举例:鼠标点击span标签时,span标签消失,同时input显示,并且,input在此已经获取到了焦点

分析:当需要浏览器重绘重排的时候,是需要时间的,当点击span标签时Input还没有渲染出来,此时如果在点击span的方法里直接写focus(),可以发现是不起作用的,input没有何来焦点?

于是this.$nextTick派上用场

$nextTick:是指等下一次dom更新,循环结束之后执行延迟回调,在修改数据之后,立即执行回调函数,此链接有例子解释

https://blog.csdn.net/guhanfengdu/article/details/125984329?spm=1001.2014.3001.5502

  // 点击span变为编辑模式
    toEdit(row,index){
      row.flag=true
      // 获取input节点实现自动聚焦
     this.$nextTick(()=>{
       this.$refs[index].focus()
     })
    }

上图用到了作用域插槽,row代表的是要点击那一行的数据,index为第几行,用于——当v-for同时生成多个input时,区分点击的是哪个,获取焦点的就是哪个,可作为例子背景了解即可。$refs为标识,相当于给上方v-for遍历的input标识,相当于id选择器,用于获取节点。

由于index为变量,所以不能使用$ref.index,而需要使用中括号。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐