Element——el-input自动聚焦

问题描述

开发过程中有如下用户体验优化需求：

• 可编辑文本最开始以文本形式展示
• 点击文本后切换输入控件
• 输入控件显示后自动聚焦，开始输入
• 输入完成，输入控件失去焦点时自动隐藏并切换回文本显示

遇到的坑

思路就是通过点击事件进行显隐的切换，并是输入框获取焦点。于是有如下代码：

<template>
	<div @dblclick="ondbclick">
		<div v-show="!isEdit"></div>
		<div v-show="isEdit">
			<el-input ref="editTask"></el-input>
		</div>
	<div>
</template>

<script>
    export default {
        name: "",
        data() {
            return {
                isEdit: false
            }
        },
		methods: {
            ondbclick() {
            // 想在input出现的时候把focus到input上
                this.isEdit = true;
                this.$refs.editTask.onfocus();	// 使输入框聚焦
            },
        }
    }
</script>

问题现象

如上代码运行后发现，并没有预期的输入框自动聚焦效果。

问题原因

原因在于data中的数据发生变化后，vue的依赖监听并更新视图过程是异步进行的，所以此时视图更新任务还在等待，输入框并没有渲染出来，此时通过$refs操作dom是无效的。

解决方法

Vue.nextTick(callback)

于是对代码中的 this.$refs.editTask.onfocus()外层做nextTick嵌套就可解决。

this.$nextTick(() => this.$refs.editTask.focus());