网站内做关键词连接,目前最好的营销模式,云盘做网站,网络营销专业就业文章目录 一、引出问题二、解决方案三、代码实现 一、引出问题
需求
编辑标题, 编辑框自动聚焦
点击编辑#xff0c;显示编辑框让编辑框#xff0c;立刻获取焦点
即下图上面结构隐藏#xff0c;下面结构显示#xff0c;并且显示的时候让它自动聚焦。
代码如下 问题
“… 文章目录 一、引出问题二、解决方案三、代码实现 一、引出问题
需求
编辑标题, 编辑框自动聚焦
点击编辑显示编辑框让编辑框立刻获取焦点
即下图上面结构隐藏下面结构显示并且显示的时候让它自动聚焦。
代码如下 问题
“显示之后”立刻获取焦点是不能成功的
原因Vue 是异步更新DOM (提升性能)
我们设想的是 this.isShowEdit true 执行完后再去执行 focus()但其实 this.isShowEdit true 执行完的时候当前DOM并不会立即更新而是上面所有代码执行完DOM才会更新这是由于每更新一次就去执行更新效率是非常低的应该一起更新 二、解决方案
$nextTick等 DOM更新后,才会触发执行此方法里的函数体 使用SetTimeout也可以但是不精准 语法: this.$nextTick(函数体)
this.$nextTick(() {this.$refs.inp.focus()
})注意$nextTick 内的函数体 一定是箭头函数这样才能让函数内部的this指向Vue实例 三、代码实现
templatediv classappdiv v-ifisShowEditinput typetext v-modeleditValue refinp /button确认/button/divdiv v-elsespan{{ title }}/spanbutton clickeditFn编辑/button/div/div
/templatescript
export default {data() {return {title: 大标题,isShowEdit: false,editValue: ,};},methods: {editFn() {// 显示输入框this.isShowEdit true;// 获取焦点// this.$refs.inp.focus()this.$nextTick(() {this.$refs.inp.focus();});},},
};
/script
