[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(); }); ```