clipboard.js 实现复制 （解决第一次点击不生效，第二次才生效的问题）

clipboard.js 我用于实现 点击复制，根据官方文档，我如下写了一个例子，如下：

<template>
  <div class="hello">
    <button @click="copy1">我就是要复制你</button>
    <button @click="copy2">我就是要复制你谁谁谁谁谁谁</button>
  </div>
</template>

<script>
import Clipboard from "clipboard";
export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  created() {},
  methods: {
    copy1(e) {
      console.log("复制", e.target);
      let xxx = new Clipboard(e.target, {
        text: () => 3444444444444
      });
      console.log("0000",xxx)
      xxx.on("success", function(e) {
        console.log("成功")
        xxx.destroy()
      });
      xxx.on("error", function(e) {
        console.log("失败")
        xxx.destroy()
      });
    },
    copy2() {
      console.log("复制");
    }
  }
};
</script>

但是，测试的时候发现，第一次点击无效，要点击第二次才生效，于是百度，结果百度出了一些邪门歪道，说啥用onmousemove 来触发第一次，我只能说，拒绝这种行为，经过我修改，代码如下

<template>
  <div class="hello">
    <button @click="copy1($event)">我就是要复制你</button>
    <button>我就是要复制你谁谁谁谁谁谁</button>
  </div>
</template>

<script>
import clipboard from "../utils/clipboard";

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },

  methods: {
    copy1(event) {
      clipboard("1234", event);
    }
  }
};
</script>

另外新建一个js

import Clipboard from 'clipboard'


export default function handleClipboard(text,event){
    const clipboard =  new Clipboard(event.target,{
        text:()=>text
    })
    clipboard.on('success',() => {
        clipboard.destroy()
    })
    clipboard.on('error',() =>{
        clipboard.destroy()
    })
    clipboard.onClick(event)
}

　　这样就可以了，哦哦哦~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~