粘貼板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用戶需要拷貝的文本。