vue v-focus v-show控制input的显示聚焦，第二次不生效问题_autofocus 第二次不聚焦

问题

很多时候我们想要实现一个按钮去控制input框的显示隐藏，eq：点击文本切换成编辑模式。
这个时候很容易想到用v-show或者v-if去控制input和文本的显示隐藏，那么问题来了，切换成编辑模式的时候输入框没有自动选中。。。

---

• 方案一： 给input加一个autofocus,
  问题出现了： 第一次的时候可以有聚焦效果，但是再隐藏显示input就没有了聚焦效果

• 方案二：使用vue官方的directive指令
  官方地址：自定义指令
  demo：

   	// 注册一个全局自定义指令 `v-focus`
   		Vue.directive('focus', {
   		  // 当被绑定的元素插入到 DOM 中时……
   		  inserted: function (el) {
   		    // 聚焦元素
   		    el.focus()
   		  }
   		})
  1
  2
  3
  4
  5
  6
  7
  8

---

然而可能还是没有达到预期的效果，这个时候我们就在想了，到底哪里出错了呢，为啥官方的不行呢，其实官网的是可以的（他的适用于原生input）。
我这里用到的是element-ui， 那么我们就来看看到底哪里的问题：

• v-focus执行周期在input未生成之前就执行了，
  官网解释：
• 第二个原因 element-ui中的input在渲染以后实质是一个div包裹一个input元素，并不是所谓的input

---

所以综上原因，先 直接上代码

.vue
		<el-form-item label="项目编号："  prop="projectNo">
              <p class="read-text" @click="changeOperateStatus('projectNo', true)"
                v-show="!canEdit['projectNo']"  ></p>
              <el-input
                v-focus="focusStatus"
                placeholder="请输入项目编号"
                v-show="canEdit['projectNo']"
                v-model="projectInfo.projectNo"
                @blur="changeOperateStatus('projectNo', false)"
              ></el-input>
       </el-form-item> 
       
.ts
// 点击文本和点击input切换
methods:{ 
 changeOperateStatus(name: string, bool: boolean) {
    this.canEdit[name] = bool;
    if (bool) {
    	//  先让input vnode先渲染出来以后 再去v-focus
      this.$nextTick(() => {
        this.focusStatus = true;
      });
    } else {
      this.focusStatus = false;
    }
  }
},
 directives: {
    focus: {
      update(el, { value }) {
        if (value) {
        // 重点注意这里 当前元素是div  所以要查到子元素中的input
          const dom =
            (el as any).querySelector("input") ||
            (el as any).querySelector("textarea");
          dom.focus();
        }
      },
    },
  },


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

好了 是不是大功告成了，