重命名输入框光标控制（vue)

使用工具为ts，vue-class-component

1. 光标基本操作

blur：使输入框失去焦点

focus：使输入框获得焦点

<template>
    <button @click='_rename' />
    <a-input v-show='ifRename' ref='myInput' />
</template>
import { Vue } from 'vue-class-component';
<script lang='ts'>
    export class MyInput extends Vue {
        ifRename = false;        

        private _blur() {
            this.$refs.myInput.blur()
        }

        private _focus() {
            this.$refs.myInput.focus()
        }

        
    }
</script>

2. 重命名操作

流程：点击button -> input显示 -> input获得焦点

<template>
    <button @click='_rename' />
    <a-input v-show='ifRename' ref='myInput' />
</template>
import { Vue } from 'vue-class-component';
<script lang='ts'>
    export class MyInput extends Vue {
        ifRename = false;        
        
        private _rename() {
            this.ifRename = true;
            (this.$refs.myInput as HTMLInputElement).focus()
        }
        
    }
</script>

问题：写完后发现input并没有按照预想获得焦点

分析：在运行完 this.ifRename = true 时，vue并不会立刻渲染更新，因此实际流程变成了: 点击button -> input获得焦点 -> input显示。

方案：解决方法思路为等vue渲染出input后再执行focus，vue的this.$nextTick(callback)在这里可以用到。nextTick会在下次DOM更新结束后执行括号内的回调。代码如下。

<template>
    <button @click='_rename' />
    <a-input v-show='ifRename' ref='myInput' />
</template>
import { Vue } from 'vue-class-component';
<script lang='ts'>
    export class MyInput extends Vue {
        ifRename = false;        
        
        private _rename() {
            this.ifRename = true;
            this.$nextTick(() => {
                (this.$refs.renameInput as HTMLInputElement).focus();
            });
        }
        
    }
</script>