告别 Flash 和臃肿框架！这个 3 万 Star 的开源工具帮你提高效率
开源前哨
共 3115字，需浏览 7分钟
·
2021-01-24 01:09
clipboard.js 用于剪贴板复制，gzip 压缩版仅有 3kb。
为什么选择 clipboard.js
将文本复制到剪贴板不应该搞得复杂，它不应该需要几十个步骤来配置或数百 KB 来加载，更不应该依赖于 Flash 或其他臃肿的框架。
clipboard.js 摆脱了这些限制，就可以实现便捷轻量的操作剪贴板。
安装
npm 安装:
npm install clipboard --save
或者下载压缩包文件：https://github.com/zenorocha/clipboard.js/archive/master.zip
配置
如果已经通过 npm 安装，则直接 import：
import ClipboardJS from "clipboard";
如果不使用 npm 管理，需要通过 script 引入或者通过 第三方CDN 加载。
<script src="dist/clipboard.min.js">script>
然后通过传入 DOM 选择器 或 HTML 元素 或 HTML 元素数组 创建 Clipboard 实例。
new ClipboardJS('.btn');
一般情况下，对于所有符合条件的元素都需要添加监听事件，但如果符合条件的元素较多，这样会消耗大量的内存。因此，clipboard.js 使用了事件代理，用一个监听器替代了全部的监听器，这样最大程度的保证了性能。
使用
从其他元素中拷贝内容
如果需要从其他元素中拷贝内容，可以通过在触发元素上添加 data-clipboard-target 属性，属性值为一个选择器，选中被拷贝元素。
<input id="foo" value="https://github.com/zenorocha/clipboard.js.git">
<button class="btn" data-clipboard-target="#foo">
<img src="assets/clippy.svg" alt="Copy to clipboard">
button>
从其他元素中剪贴内容
在触发元素中添加 data-clipboard-action 属性，属性值可以为 copy 或者 cut，设置为 cut 即可剪贴内容，默认为 copy。
<textarea id="bar">Mussum ipsum cacilds...textarea>
<button class="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
button>
注意：
cut仅在或