clipboard.js??現(xiàn)代化的拷貝文字?
?clipboard.js 不依賴flash, 不依賴其他框架纠俭，gzip壓縮后只有3kb大小
文檔地址 ：http://www.clipboardjs.cn/
安裝
通過npm工具安裝
js框架下 npm 命令
npm install clipboard --save
ts框架下 npm 命令
npm install --save @types/clipboard
CDN
<script src="dist/clipboard.min.js"></script>
引入
import?ClipboardJS? from?"clipboard";
或
const?ClipboardJS? =?require("clipboard");
設置
需要傳入一個 DOM選擇器,?HTML 元素，ClipboardJS 會對你傳入的所有元素綁定事件
const?copy?=?new?ClipboardJS("#copyButton");
使用
復制文本
從另一個元素復制文本，可以給目標元素添加一個 data-clipboard-target 屬性來實現(xiàn)這個功能或杠。
這個屬性的值就是能匹配到另一個元素的選擇器娃弓。
<span?id="foo">復制的文本</span>
<button?data-clipboard-target="#foo">復制</button>
從屬性復制文本不需要從另一個元素來復制內(nèi)容凸舵，僅需給目標元素設置一個data-clipboard-text?屬性即可贮竟。
<button?data-clipboard-text="復制的文本"?id="copyButton">復制</button>
剪切文本
從另一個元素剪切文本，可以定義一個?data-clipboard-action?屬性來指明想要復制還是剪切內(nèi)容掷倔。
如果省略這個屬性眉孩，則默認為復制。
<input?type="text"?value="復制的文本"?id="foo"?/>
<button?data-clipboard-action="cut"?data-clipboard-target="#foo">復制</button>
注意：剪切操作只在<input>?或者?<textarea>?元素上生效
事件
想要展示一些用戶反饋勒葱，或者在用戶復制/剪切后獲取已經(jīng)選擇的文字，通過觸發(fā)自定義事件凛虽，比如success?和?error 可以設置監(jiān)聽并實現(xiàn)自定義邏輯.
let?clipboard?=?new?Clipboard("#copyButton",?{
????text:?(trigger:?any)?=>?{
??????console.log("當前節(jié)點",?trigger);
??????console.log("下一個同級節(jié)點",?trigger.nextElementSibling);
??????console.log("上一個同級節(jié)點",?trigger.previousElementSibling);
??????return?trigger.previousElementSibling.innerHTML;
????}
??});
??clipboard.on("success",?()?=>?{
????alert("復制成功");
????clipboard.destroy(); //?釋放內(nèi)存
??});
??clipboard.on("error",?()?=>?{
????alert("復制失敗");
????clipboard.destroy();
??});
