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

Posted allen2333

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue - 实现双击显示编辑框;自动聚焦点击的显示框;点击编辑框外的地方,隐藏编辑框相关的知识,希望对你有一定的参考价值。

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

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。

以上是关于Vue - 实现双击显示编辑框;自动聚焦点击的显示框;点击编辑框外的地方,隐藏编辑框的主要内容,如果未能解决你的问题,请参考以下文章

Vue 回顾之指令(关于input自动聚焦的问题)

vue input 输入框聚焦

Vue2.x Todo之自定义指令实现自动聚焦的方法

vue实现点击button按钮,input输入框自动聚焦,带微信原生做法

jQuery如何实现一个显示数字,双击后变成可输入框?

vue中,点击button按钮后,页面上的input框自动聚焦