【js】vue项目中实现点击复制过滤条件，获取并处理粘贴板内容

前情提要

有这样一个需求：每次重复选过滤条件太麻烦啦，需要一个可以复制过滤条件的功能！过滤条件类似下图。

主要步骤

• 第一步：复制工具的选取。这里我选用的是原生的Document.execCommand()方法，该方法允许运行命令来操纵可编辑内容区域的元素。详情可查看MDN。

• 第二步：设计一个按钮，当click这个按钮的时候，执行handleCopy()方法。

  • this.viewValue：存放过滤条件的值；
  • 为什么要新建一个input元素：由于Document.execCommand()方法是用来操纵可编辑内容区域的元素，而这里的过滤条件明显不是，故我们要借用input元素；
  • input.setSelectionRange(0, -1)：(0,-1) 代表全选

    以下引用于MDN：
    HTMLInputElement.setSelectionRange 方法可以从一个被 focused 的 元素中选中特定范围的内容。

  <button @click="handleCopy"></button>
  
  // js
  handleCopy () {
    if (this.viewValue) {
        const input = document.createElement('input');
        let copyValue = JSON.stringify(this.viewValue);
  
        input.setAttribute('readonly', 'readonly');
        input.setAttribute('value', copyValue);
        document.body.appendChild(input);
        input.focus();
        input.setSelectionRange(0, -1);
        if (document.execCommand('copy')) {
            document.execCommand('copy');
            this.$Notify.success('复制成功！'); // 只是一个提示
        }
        document.body.removeChild(input);
    }
  }
  

  这样复制就可以实现复制啦，此时ctrl+v可以看到我们复制的this.viewValue的内容。

• 第三步：获取粘贴板的内容。
  上述代码实现了过滤条件的复制，但是直接ctrl+v又没法替换过滤条件。所以，我们需要监听粘贴（paste）事件，在该事件中，将粘贴板中的内容替换到过滤条件中。

  // mounted钩子中
  document.addEventListener('paste', (event) => {
      // 用户打开了过滤条件窗口的话，执行。所以这里根据实际场景进行判断
      if (...) {
      	// 获取粘贴板的内容
          let pasteValue = (event.clipboardData || window.clipboardData).getData('text');
          // 如果pasteValue符合过滤条件格式的话，执行。总不能用户复制了啥我们都执行吧，所以也根据实际场景做判断
          if (...) {
              // 节流，规定时间内，只执行一次。
              let nowTime = new Date();
              if (!this.lastPasteTime || nowTime - this.lastPasteTime > 5000) {
              	// 复制的时候我们做了stringy处理，所以这里要转换回原有格式。
                  pasteValue = JSON.parse(pasteValue);
                  // 友好一点，提醒一下用户
                  this.$Modal.confirm({
                      title: '警告',
                      content: '您正在进行的粘贴操作将覆盖现有条件，确认要继续吗？',
                      onOk: () => {
                          this.viewValue = pasteValue;
                      },
                      modalProps: {
                          'confirm-text': '粘贴'
                      }
                  });
                  this.lastPasteTime = nowTime;
              }
              // 如果当前聚焦了可编辑元素，那么我们复制的内容会被粘贴到该元素中，在不希望发生这样的情况的时候，我们需要阻止默认事件
              event.preventDefault();
          }
      }
   });
  

  总结

  到这里，点击按钮进行复制，以及获取并处理粘贴板内容的功能就实现了。今天的分享就到这里，如果有错误的地方或者处理不够好的地方欢迎提出来讨论讨论！

更新于2021年1月18日

无意中看到mdn上说到此特性被废弃，所以最好不用此特性来实现复制功能了。