1.这个框架它不依赖于Flash或任何blo肿的框架。
2.安装。
你可以在npm找到它。
npm install clipboard --save
或者
bower install clipboard --save
然后下载脚文件。下载网址：https://clipboardjs.com/
3.建立
首先，包括dist文件夹中的脚本或从第三方CDN提供程序加载脚本。
<script src="dist/clipboard.min.js"></script>
现在，您需要通过传递DOM选择器，HTML元素或HTML元素列表来实例化它。
newClipboard('.btn');
在内部，我们需要获取与选择器匹配的所有元素，并为每个元素附加事件侦听器。但猜猜是什么？如果你有数百场比赛，这个操作可以消耗大量的内存。
因此，我们使用事件委托，只用一个监听器替换多个事件侦听器。毕竟，#perfmatters。
4.用法。
利用HTML5数据属性来获得更好的可用性。
从另一个元素复制文本：
一个很常见的用例是从另一个元素复制内容。您可以通过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内容。
如果省略此属性，copy默认情况下将被使用。
<textarea id="bar">Mussum ipsum cacilds...</textarea>
<buttonclass="btn" data-clipboard-action="cut" data-clipboard-target="#bar">
Cut to clipboard
</button>
正如您所期望的，该cut操作只适用于<input>或<textarea>元素。
从属性复制文本：
真相是，你甚至不需要另一个元素来复制它的内容。您可以data-clipboard-text在触发器元素中包含一个属性。
<button class="btn" data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
Copy to clipboard
</button>
5.活动
在某些情况下，您希望显示一些用户反馈或捕获在复制/剪切操作后选择的内容。
这就是为什么我们触发自定义事件，比如success和error你倾听并实现自定义的逻辑。
var clipboard =newClipboard('.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);
});
6.高级用法
如果你不想修改你的HTML，那么你可以使用一个非常方便的命令API。所有你需要做的是声明一个函数，做你的事情，并返回一个值。
例如，如果要动态设置一个target，则需要返回一个节点。
new Clipboard('.btn', {
target:function(trigger){
return trigger.nextElementSibling;
}
});
如果你想动态地设置一个text，你将返回一个String。
newClipboard('.btn', {
text:function(trigger){
returntrigger.getAttribute('aria-label');
}
});
此外，如果您使用单页面应用程序，则可能需要更准确地管理DOM的生命周期。以下是清理我们创建的事件和对象的方法。
var clipboard =new Clipboard('.btn');
clipboard.destroy();
