Vue - 实现双击显示编辑框；自动聚焦点击的显示框；点击编辑框外的地方，隐藏编辑框

Posted 2021-02-14 allen2333

实现这三个功能的踩坑记录。

1. 需求

在Vue中，有一个input， 双击时编辑文本，点击该input节点外的其他地方，则取消编辑。

那么这里有三个要实现的地方
第一是双击显示编辑框。
第二是自动聚焦点击的显示框。
第三是点击编辑框外的地方，隐藏编辑框。

一二点都是在startPipeLineNameEdit这个method中去实现。

---

2. 实现双击显示编辑框

思路： 使用两个span包含双击前和双击后的代码，用isEditingPipeLineName这个变量去控制显示与否。(PipeLineName与我写的当前组件有关)。
然后绑定一个双击时的事件@dblclick="startPipeLineNameEdit"。
父组件BoardArea大致代码

       //PipeLine是子组件，可见可以有很多个子组件实例，因为v-for了一个数组
      <PipeLine
        v-for="pipeLine in wrappedPipeLineList"
        :pipeLine="pipeLine"
        class="pipe-line-item"
        :key="pipeLine.id"
      />

子组件PipeLine大致代码

      
      <span v-show="!isEditingPipeLineName">
            ..未双击前
         <span @dblclick="startPipeLineNameEdit"></span>
         <span></span>
      </span>
      <span v-show="isEditingPipeLineName" v-model="editPipeLineName">
            ...双击后
        <input class="edit-pipeline"...>
        <button ...>save</button>
      </span>

---

3. 实现编辑框自动聚焦。

思路：操作DOM，找出那个DOM节点，然后focus。初学Vue，也想不到其他办法了。其实在Vue中自行操作DOM节点不好，因为Vue是数据驱动的，是自行更新DOM。

    startPipeLineNameEdit() {
      this.isEditingPipeLineName = true;
      let edit_pipeline = document.querySelector('.edit-pipeline');
      
      edit_pipeline.focus();   
    },

问题1 死活不能focus。

Google后，发现https://forum.vuejs.org/t/setting-focus-to-textarea-not-working/17891。
原来Vue有一个DOM更新周期，可以用$nextTick立即触发。

    startPipeLineNameEdit() {
      this.isEditingPipeLineName = true;

      this.$nextTick(() => {
        let edit_pipeline = document.querySelector('.edit-pipeline');
        edit_pipeline.focus();
      }
    },

问题2 只能focus第一个pipeline

原因：
解决办法：改成querySelectorAll然后遍历好了

    startPipeLineNameEdit() {
      this.isEditingPipeLineName = true;

      this.$nextTick(() => {
        let edit_pipelines = document.querySelectorAll('.edit-pipeline');
        edit_pipelines.forEach((element) => {
          element.focus();
        })
      });
    },

---

4. 实现点击编辑框外的地方，隐藏编辑框

方法1 首先想到的是“点击外面”，然后google: "vue click away", "vue click outside"等关键字，找到https://stackoverflow.com/questions/36170425/detect-click-outside-element。

里面有自定义vue指令的，也有两个轮子。选用其中一个轮子vue-clickaway。

// 按文档上开整
<input class="edit-pipeline" type="text" v-model="editPipeLineName" v-on-clickaway="away">


away() {
   console.log('clicked away');
   this.isEditingPipeLineName = false;
},

方法1出现的问题(还没解决有TODO)

性能损耗严重： 如果有n个Pipeline, 则每次会触发n次这个函数。如果这个函数里面有密集计算（例如加个循环加法），导致非常卡。

弃用这个轮子，可能这个轮子不适合去实现这个功能。
还有个原生和jQuery的“点击外面”的方法，现在功力不行，加入TODO。

方法2 监听blur事件

得益于自动聚焦(focus)，那么我可以监听focus的相反事件blur。

<input class="edit-pipeline" type="text" v-model="editPipeLineName" @blur="away">

---

总结

应该有其他优雅的实现方法，加入TODO。