Clipboard.js：一个被157317个项目疯抢的JS开源库

摘要：Clipboard.js实现了原生 JavaScript（无 Flash）的浏览器内容复制到系统剪贴板Clipboard.jsClipboard.js是一个用于将文本复制到剪贴板的 JS 库。没有使用 Flash，没有使用任何框架，开启 gzipped 压缩后

大家好，我是程序视点的小二哥!
本期介绍一个非常常用的前端插件：Clipboard.js。
Clipboard.js 实现了原生 JavaScript （无 Flash）的浏览器内容复制到系统剪贴板Clipboard.jsClipboard.js 是一个用于将文本复制到剪贴板的 JS 库。没有使用 Flash，没有使用任何框架，开启 gzipped 压缩后仅仅只有 3kb。

作者 zenorocha 认为：

将文本复制到剪贴板应该不难。它不需要几十个步骤来配置，也不需要加载数百 KB 的文件。最最重要的是，它不应该依赖于 Flash 或其他任何框架。

该库依赖于 Selection 和 execCommand API，几乎所有的浏览器都支持 Selection API。然而但是，不用担心！对于较老的浏览器，Clipboard.js 也可以优雅地Clipboard.js在使用 Clipboard.js 之前，你可以通过 NPM 或 CDN 的方式来安装它：
NPM

npm install clipboard --save

设置复制剪贴的内容
从另一个元素复制内容。你可以给目标元素添加一个 data-clipboard-target 属性来实现这个功能

你还可以定义一个属性来指明你想要复制还是剪切内容

大师兄很帅...

剪切

复制当前的内容，需要给目标元素设置一个 data-clipboard-text 属性即可

复制

如果你想要展示一些用户反馈，或者在用户复制/剪切后获取已经选择的文字，这里有个示例供你参考。我们通过触发自定义事件，比如 success 和 error 让你可以设置监听并实现自定义逻辑

var clipboard = new ClipboardJS('.btn');

clipboard.on('success', function(e) {
console.info('Action:', e.action);
console.info('Text:', e.text);
console.info('Trigger:', e.trigger);

e.clearSelection;
});

clipboard.on('error', function(e) {
console.error('Action:', e.action);
console.error('Trigger:', e.trigger);
});

如果你不想修改 HTML，提供了一个非常方面的命令式的 API 给你使用。你需要做的就是声明一个函数，做一些处理，并返回一个值。

例如, 你希望动态设置target, 你需要返回一个node节点.

new ClipboardJS('.btn', {
target: function(trigger) {
return trigger.nextElementSibling;
}
});

动态设置text, 你需要返回字符串。

new ClipboardJS('.btn', {
text: function(trigger) {
return trigger.getAttribute('aria-label');
}
});

如果在模态框（Modals）中使用，或是在其他修改焦点的类库中使用，你会希望将获得焦点的元素设置为 container 属性的值。

new ClipboardJS('.btn', {
container: document.getElementById('modal')
});

同样地，如果你使用单页应用，你可能想要更加精确地管理 DOM 的生命周期。你可以清理事件以及创建的对象。

var clipboard = new ClipboardJS('.btn');
clipboard.destroy;

好了！关于 Clipboard.js 的使用，小二哥就介绍到这里，感兴趣的小伙伴可以查看 Github 上 Clipboard.js 的使用示例。Clipboard.js

【程序视点】助力打工人减负，从来不是说说而已！

后续小二哥会继续详细分享更多实用的工具和功能。持续关注，这样就不会错过之后的精彩内容啦！