Vue中input自动聚焦
举例:鼠标点击span标签时,span标签消失,同时input显示,并且,input在此已经获取到了焦点分析:当需要浏览器重绘重排的时候,是需要时间的,当点击span标签时Input还没有渲染出来,此时如果在点击span的方法里直接写focus(),可以发现是不起作用的,input没有何来焦点?
·
举例:鼠标点击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,而需要使用中括号。
更多推荐
已为社区贡献6条内容
所有评论(0)