Clipboard中success重复提示处理顺带记录表格复制

重复提示处理

原因: 因为多次定义了 Clipboard，所以会重复提示

需要销毁多余的定义，利用 clipboard.destroy() 进行清除

触发按钮

<button
    data-clipboard-action="copy"
    :id="`copyBtn${tableKey}`"
    :data-clipboard-target="`#copyTextarea${tableKey}`"
>
复制表格
</button>

需要复制的表格

<div style="position: absolute; top: -1000000px;left:-1000000px">
    <!-- <div id="copyDomBox"> -->
    <div :id="`copyHeadTable${tableKey}`">
        <table border>
          <tr>
            <th
              v-for="(temp,key) in tableColums"
              :key="key"
            >{{temp.name||temp.text||temp.title}}</th>
          </tr>
          <tr
            v-for="(item,index) in copyTableList"
            :key="index"
          >
            <td
              v-for="(temp,key) in tableColums"
              :key="key"
            >
             `<span>{{item[temp.label]||'0'}}</span>`// 自定义渲染内容
            </td>
          </tr>
        </table>
    </div>
</div>

需要用到 textarea

经过复制的内容放入 textarea 中，然后去除 textarea 的 value，就可以去除表格自带样式，只取表格数据内容

<textarea
    name="":id="`copyTextarea${tableKey}`"cols="30"rows="10"
></textarea>

data

data(){
    return {
        tableKey: 'helloword',
        tableColums: [
            {
              name: "姓名",
              label: "name"
            },
            {
              name: "性别",
              label: "sex"
            },
            {
              name: "年龄",
              label: "age"
            } 
        ],
        copyTableList: [
            {
                name: '张三',
                sex: '男',
                age: '20',
            },
            {
                name: '李四',
                sex: '女',
                age: '30',
            }
        ]
    }
}

模板初始化

initCopy() {
      let self = this;
      Vue.nextTick(function() {if (self.xTableObj.afterFullData.length > 0) {self.copyTableList = self.xTableObj.afterFullData;}
        let copybtn = document.getElementById(`copyBtn${self.tableKey}`);

        let copyTable = document.getElementById(`copyTable${self.tableKey}`);

        textarea.value = "";
        
        setTimeout(() => {
          textarea.value = copyTable.innerText;
          if(self.clipboard){self.clipboard.destroy();
          }
          let clipboard = new Clipboard(copybtn);
          self.clipboard = clipboard;
          self.clipboard.on("success", function(e) {
            self.$message({
              message: "表格复制成功",
              type: "success"
            });
            self.clipboard.destroy();});
        }, 500);
      });
    }   

总结

由于表格带有排序、筛选的操作，需要每次操作完后，复制的是操作后的表格内容，因此会多次调用初始化方法，需要每次定义之前，或者成功复制之后进行清除。

这样既可保证，只有一个复制模板的定义，也就不会在多次操作排序或者筛选之后，弹多个提示。

注意

表格中用到的 tableKey，用来指定唯一表格。单页应用，经常可能会取到多个，需要进行区分。