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)
}

　　這樣就能夠了，哦哦哦~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~