vue 和clipboard 得结合

最近工作中遇到了个分享得按钮

点击之后提示分享复制完成，然后自动生成文字

嘿，小伙伴，我在这里发现了一个非常有意思的课程，你也快点加入吧!http://localhost:8080/kcjs?cour=25

嘿嘿，这里写一下我得完成方法。
首先把这个玩意npm下来：

npm install clipboard --save

然后在自己所要用到得组件引用一下子：

import Clipboard from "clipboard";

然后就是用了

<el-col :span="4" :offset="1">
                <span
                  id="phone"
                  style="color:#fff;display:block;margin-top:-47px;width:200px;"
                >{{ phone }}</span>
                <a
                  style="text-decoration: none;"
                  class="copy-link el-button el-button--primary"
                  data-clipboard-target="#phone"
                >分享</a>
              </el-col>

data里面记得定义

重要的一步记得在mounted中初始化一下

mounted() {
    let _this = this;
    const clipboard = new Clipboard(".copy-link");
    clipboard.on("success", function(e) {
      _this.$message({
        type: "success",
        message: "复制成功"
      });
      clipboard.off("error");
      clipboard.off("success");
      clipboard.destroy();
      e.clearSelection();
    });
    clipboard.on("error", function(e) {
      _this.$message({
        type: "warning",
        message: "对不起，复制失败了，请手动复制吧"
      });
      clipboard.off("error");
      clipboard.off("success");
      clipboard.destroy();
    });
  },

完成！