vue中使用clipboard.js插件复制文本

2,727 阅读1分钟

最近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('复制失败');
    });
}