[TOC] #### 1. clipboard.js 介紹 --- clipboard.js 是一個(gè)不需要 flash，將文本復(fù)制到剪切板的插件，體積很小，非常實(shí)用的一款插件 clipboard.js 開(kāi)源地址: [https://github.com/zenorocha/clipboard.js](https://github.com/zenorocha/clipboard.js) ，目前已有 32k Star，可見(jiàn)其很受歡迎 #### 2. clipboard.js 安裝方式 --- 方式一、通過(guò) npm 使用 將 clipboard.js 安裝為運(yùn)行時(shí)依賴 ``` npm install clipboard --save ``` 方式二、通過(guò) script 引入 在 clipboard.js 倉(cāng)庫(kù)中的 dist 文件夾中下載 clipboard.min.js，或通過(guò)第三方 CDN 引入即可 ```html <script src="dist/clipboard.min.js"></script> ``` #### 3. clipboard.js 基本使用 --- 首先需要通過(guò)傳遞 DOM 選擇器來(lái)實(shí)例化它，選擇器可以是 html 元素，也可以是 html 元素列表 用一個(gè)元素當(dāng)觸發(fā)器來(lái)復(fù)制另一個(gè)元素的文本，`data-clipboard-target` 屬性后需要跟屬性選擇器 下面是一個(gè)簡(jiǎn)單的使用示例: ```html <script src="./dist/clipboard.min.js"></script> <input type="hidden" value="liang" id="foo"> <button class="btn" data-clipboard-target="#foo">復(fù)制</button> <script> new ClipboardJS('.btn'); </script> ``` 可以通過(guò) `data-clipboard-action` 屬性指定是 拷貝(copy) 還是 剪切(cut) 操作 ```html <button class="btn" data-clipboard-target="#foo" data-clipboard-action="cut">復(fù)制</button> ``` 也可以通過(guò)屬性復(fù)制文本，不需要另一個(gè)元素當(dāng)觸發(fā)器，可以使用 `data-clipboard-text` 屬性，在后面放上需要復(fù)制的文本 ```html <button class="btn" data-clipboard-text="hello vue">復(fù)制</button> ``` #### 4. clipboard.js 事件監(jiān)聽(tīng) --- 當(dāng)復(fù)制/剪切成功時(shí)如果想要給個(gè)提示，可以使用下面方法監(jiān)聽(tīng)其操作 ```javascript const clipboard = new ClipboardJS('.btn'); clipboard.on('success', function (e) { // action: copy|cut // text: 復(fù)制的文本 // trigger: 點(diǎn)擊的dom元素 const { action, text, trigger } = e console.info('Action:', action); console.info('Text:', text); console.info('Trigger:', trigger); // 取消選中 e.clearSelection(); }); ```