告別 Flash 和臃腫框架！這個 3 萬 Star 的開源工具幫你提高效率
clipboard.js 用于剪貼板復(fù)制，gzip 壓縮版僅有 3kb。
為什么選擇 clipboard.js
將文本復(fù)制到剪貼板不應(yīng)該搞得復(fù)雜，它不應(yīng)該需要幾十個步驟來配置或數(shù)百 KB 來加載，更不應(yīng)該依賴于 Flash 或其他臃腫的框架。
clipboard.js 擺脫了這些限制，就可以實(shí)現(xiàn)便捷輕量的操作剪貼板。
安裝
npm 安裝:
npm?install?clipboard?--save
或者下載壓縮包文件：https://github.com/zenorocha/clipboard.js/archive/master.zip
配置
如果已經(jīng)通過 npm 安裝，則直接 import：
import?ClipboardJS?from?"clipboard";
如果不使用 npm 管理，需要通過 script 引入或者通過 第三方CDN 加載。
<script?src="dist/clipboard.min.js">script>
然后通過傳入 DOM 選擇器 或 HTML 元素 或 HTML 元素?cái)?shù)組 創(chuàng)建 Clipboard 實(shí)例。
new?ClipboardJS('.btn');
一般情況下，對于所有符合條件的元素都需要添加監(jiān)聽事件，但如果符合條件的元素較多，這樣會消耗大量的內(nèi)存。因此，clipboard.js 使用了事件代理，用一個監(jiān)聽器替代了全部的監(jiān)聽器，這樣最大程度的保證了性能。
使用
從其他元素中拷貝內(nèi)容
如果需要從其他元素中拷貝內(nèi)容，可以通過在觸發(fā)元素上添加 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>
從其他元素中剪貼內(nèi)容
在觸發(fā)元素中添加 data-clipboard-action 屬性，屬性值可以為 copy 或者 cut，設(shè)置為 cut 即可剪貼內(nèi)容，默認(rèn)為 copy。
<textarea?id="bar">Mussum?ipsum?cacilds...textarea>
<button?class="btn"?data-clipboard-action="cut"?data-clipboard-target="#bar">
????Cut?to?clipboard
button>
注意：
cut僅在或
圖片
表情
<b id="afajh"><abbr id="afajh"></abbr></b>