粘贴板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用户需要拷贝的文本。
