最近get到一个使用clipboard.js插件官方网址复制文本的小功能,看了网上各种教程后并在自己项目需求中实现了随便也记录下来:
一、第一步还是下载包
npm install clipboard --save
二、在需要用到的.vue组件中引入
import ClipboardJS from 'clipboard';
三、具体实现代码
// HTML部分
<div class="invitation-code">
<span>邀请码:</span>
<span id="copycode">ABCDEFG</span>
</div>
<div class="copy" @click="copyCode" data-clipboard-target="#copycode" ></div>
// 在methods中调用
copyCode() {
let clipboard = new ClipboardJS(".copy");
clipboard.on("success", e => {
// 调用小弹窗
this.$toast('复制成功');
});
clipboard.on("error", e => {
this.$toast('复制失败');
});
}