粘貼板clipboard.js的使用方法
一破停、使用場景
在移動端開發(fā)的時候翅楼，有的應(yīng)用需要用戶拷貝頁面的內(nèi)容尉剩，方便用戶操作。此時毅臊，就是需要是用粘貼板功能理茎。
二、使用步驟
1. npm安裝clipboard.js插件
npm install clipboard --save
2. 頁面dom結(jié)構(gòu)
<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">復(fù)制</div>
3. 在文件中引入
import Clipboard from "clipboard";
4. 使用方法
coppUrl() {
let _this = this;
let clipboard = new Clipboard("#copyBtn");
clipboard.on("success", function(e) {
alert("復(fù)制成功");
_this.showBtn();
e.clearSelection();
});
},
三管嬉、注意事項
- 如果需要在復(fù)制成功后皂林，做業(yè)務(wù)處理，注意此時需要在
success執(zhí)行蚯撩。 - 對于
success事件中础倍，需要注意this的指向問題。this測試不是指向vue實例胎挎。 -
currentPageUrl用戶需要拷貝的文本沟启。
