文章目录
- 一、引出问题
- 二、解决方案
- 三、代码实现
一、引出问题
需求
编辑标题, 编辑框自动聚焦
- 点击编辑，显示编辑框
- 让编辑框，立刻获取焦点
即下图上面结构隐藏，下面结构显示，并且显示的时候让它自动聚焦。
代码如下
问题
“显示之后”，立刻获取焦点是不能成功的！
原因：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实例
三、代码实现
<template><div class="app"><div v-if="isShowEdit"><input type="text" v-model="editValue" ref="inp" /><button>确认</button></div><div v-else><span>{{ title }}</span><button @click="editFn">编辑</button></div></div>
</template><script>
export default {data() {return {title: "大标题",isShowEdit: false,editValue: "",};},methods: {editFn() {// 显示输入框this.isShowEdit = true;// 获取焦点// this.$refs.inp.focus()this.$nextTick(() => {this.$refs.inp.focus();});},},
};
</script>
