vue—复制功能

最近写项目遇到了一个新需求，完成一键复制功能，这个功能在项目中说是很常见了。但是也卡了很长时间竟然。下面记录一下整个流程卡的地方

1. 首先在项目中导入clipboard

npm install clipboard --save

2. 首先在项目中导入clipboard

import Clipboard from 'clipboard'

写好按钮 并加上点击事件

下面 this.$refs.clipboard_pc 对应上面要点击按钮的 ref=“clipboard_pc”

tip: 注意对应的是 要点击按钮
我就是对应的是给展示的数据的那个模块加的，浪费了好长时间

   //复制pc链接
    copyPC() {
      let clipboard = new Clipboard(this.$refs.clipboard_pc);//这里是所对应的点击按钮
      clipboard.on("success", (e) => {
        this.$message({
          message: "复制成功",
          type: "success",
        });
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        console.log(this, "该浏览器不支持复制!", "warning");
        // 释放内存
        clipboard.destroy();
      });
    },

    //复制h5链接
    copyh5() {
      let clipboard = new Clipboard(this.$refs.clipboard_h5);
      clipboard.on("success", (e) => {
        this.$message({
          message: "复制成功",
          type: "success",
        });
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        // 不支持复制
        console.log(this, "该浏览器不支持复制!", "warning");
        // 释放内存
        clipboard.destroy();
      });
    },

我这里是两个复制的需求
所以就写了两份代码，复制了一份