粘贴板clipboard.js的使用方法

粘贴板clipboard.js的使用方法

一、使用场景

在移动端开发的时候，有的应用需要用户拷贝页面的内容，方便用户操作。此时，就是需要是用粘贴板功能。

---

二、使用步骤

1. npm安装clipboard.js插件

npm install clipboard --save

2. 页面dom结构

<div class="url" id="target" v-show="false">{{currentPageUrl}}</div>
<div class="btn" id="copyBtn" :data-clipboard-text="currentPageUrl" data-clipboard-action="copy" data-clipboard-target="#target" @click="coppUrl">复制</div>

3. 在文件中引入

import Clipboard from "clipboard";

4. 使用方法

coppUrl() {
    let _this = this;
    let clipboard = new Clipboard("#copyBtn");
    clipboard.on("success", function(e) {
        alert("复制成功");
        _this.showBtn();
        e.clearSelection();
    });
},

---

三、注意事项

• 如果需要在复制成功后，做业务处理，注意此时需要在success执行。
• 对于success事件中，需要注意this的指向问题。this测试不是指向vue实例。
• currentPageUrl用户需要拷贝的文本。