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