vue使用clipboard复制的插件以及踩坑记录

//安装就不用说了把
npm install clipboard

使用方法：

//template 看过很多资料 但是在vue中操作DOM不建议 我们尽量采用ref的方式
<span
class="tag"
ref="copy"
@click="copy"
>{{newPassword}}</span>

//methods
copy() {
      let copy = this.$refs.copy
      let clipboard = new Clipboard(copy, {
        text: (trigger) => {
          return this.password
        }
      });
      console.log('2');
      clipboard.on("success", (e) => {
        console.log('1');
        this.$message({message: '复制成功', showClose: true, type: 'success'})
        // 释放内存
        clipboard.destroy();
      });
      clipboard.on("error", (e) => {
        this.$message({message: '复制失败,', showClose: true, type: 'error'})
        clipboard.destroy();
      });
    },

——————————分割线（坑处）—————————
针对于第一次点击无效，第二次点击生效的问题解决如下：

经过自己摸索，出来了两种办法。
原因： 先看图


注意：在Vue文件中引入这个插件，我们只是在点击调用方法的时候实例化了这个插件，所以第一次点击没有作用

第一：在mounted挂载这个方法，加载页面完毕就已经创建了实例，解决了点击的问题（推荐）

第二：在mounted中直接挂载实例，不需要自己在方法里像上面的图里一样创建实例，加载页面完毕之后就创建一个实例，也解决了这个问题

  mounted(){
    this.clipboard = new Clipboard(this.$refs.copy, {
        text: (trigger) => {
          return this.password
        }
      });
  },

copy() {
      this.clipboard.on("success", (e) => {
        this.$message({message: '复制成功', showClose: true, type: 'success'})
      });
      this.clipboard.on("error", (e) => {
        this.$message({message: '复制失败,', showClose: true, type: 'error'})
        this.clipboard.destroy();
      });
    }