1.這個框架它不依賴于Flash或任何blo腫的框架。
2.安裝。
你可以在npm找到它。
npm install clipboard --save
或者
bower install clipboard --save
然后下載腳文件。下載網(wǎng)址：https://clipboardjs.com/
3.建立
首先浪藻，包括dist文件夾中的腳本或從第三方CDN提供程序加載腳本浙芙。
<script? ? ? src="dist/clipboard.min.js"></script>
現(xiàn)在登刺，您需要通過傳遞DOM選擇器，HTML元素或HTML元素列表來實例化它嗡呼。
newClipboard('.btn');
在內(nèi)部纸俭，我們需要獲取與選擇器匹配的所有元素，并為每個元素附加事件偵聽器南窗。但猜猜是什么揍很？如果你有數(shù)百場比賽，這個操作可以消耗大量的內(nèi)存万伤。
因此窒悔，我們使用事件委托，只用一個監(jiān)聽器替換多個事件偵聽器敌买。畢竟简珠，#perfmatters。
4.用法虹钮。
利用HTML5數(shù)據(jù)屬性來獲得更好的可用性聋庵。
從另一個元素復(fù)制文本：
一個很常見的用例是從另一個元素復(fù)制內(nèi)容。您可以通過data-clipboard-target在觸發(fā)器元素中添加一個屬性來實現(xiàn)芙粱。
您在此屬性上包含的值需要匹配另一個元素選擇器祭玉。
<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內(nèi)容脱货。
如果省略此屬性，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>元素。
從屬性復(fù)制文本：
真相是线召，你甚至不需要另一個元素來復(fù)制它的內(nèi)容铺韧。您可以data-clipboard-text在觸發(fā)器元素中包含一個屬性。
<button??? class="btn"??? data-clipboard-text="Just because you can doesn't mean you should — clipboard.js">
??????????????? Copy to clipboard
</button>
5.活動
在某些情況下缓淹，您希望顯示一些用戶反饋或捕獲在復(fù)制/剪切操作后選擇的內(nèi)容。
這就是為什么我們觸發(fā)自定義事件塔逃，比如success和error你傾聽并實現(xiàn)自定義的邏輯讯壶。
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，那么你可以使用一個非常方便的命令A(yù)PI湾盗。所有你需要做的是聲明一個函數(shù)伏蚊，做你的事情，并返回一個值格粪。
例如躏吊，如果要動態(tài)設(shè)置一個target氛改，則需要返回一個節(jié)點。
new? Clipboard('.btn', {
???? target:function(trigger){
??????????????? return??? trigger.nextElementSibling;
?? }
});
如果你想動態(tài)地設(shè)置一個text比伏，你將返回一個String胜卤。
newClipboard('.btn', {
???????? text:function(trigger){
????????????? returntrigger.getAttribute('aria-label');
??????????? }
});
此外，如果您使用單頁面應(yīng)用程序赁项，則可能需要更準(zhǔn)確地管理DOM的生命周期葛躏。以下是清理我們創(chuàng)建的事件和對象的方法。
var?? clipboard =new?? Clipboard('.btn');
clipboard.destroy();
