官网：http://www.clipboardjs.cn/
GitHub地址：https://github.com/zenorocha/clipboard.js
一、安装依赖
cnpm install clipboard --save
二、main.js引入
import Clipboard from 'clipboard'; Vue.prototype.Clipboard=Clipboard
三、button按钮添加如下属性
:data-clipboard-text指定你的v-mode数据，@click方法是中需要使用id的值
:data-clipboard-text="code" id="copyText" @click="copy"
copy() { var clipboard = new this.Clipboard("#copyText"); clipboard.on("success", (e) => { clipboard.destroy(); }); clipboard.on("error", (e) => { // 不支持复制 // 释放内存 clipboard.destroy(); }); },
四、完整代码
<!-- --> <template> <div> <div>{{ code }}</div> <button :data-clipboard-text="code" id="copyText" @click="copy" >立即领取</button> </div> </template> <script> export default { data() { return { code: "1313131", }; }, methods: { copy() { var clipboard = new this.Clipboard("#copyText"); clipboard.on("success", (e) => { clipboard.destroy(); }); clipboard.on("error", (e) => { // 不支持复制 // 释放内存 clipboard.destroy(); }); }, }, }; </script> <style> </style>
