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) }
这样就可以了，哦哦哦~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
clipboard.js 实现复制 （解决第一次点击不生效，第二次才生效的问题）
原文：https://www.cnblogs.com/feibiubiu/p/12909586.html