1. clipboard.js 介紹
clipboard.js 是一個不需要 flash,將文本復(fù)制到剪切板的插件,體積很小,非常實用的一款插件
clipboard.js 開源地址: https://github.com/zenorocha/clipboard.js ,目前已有 32k Star,可見其很受歡迎
2. clipboard.js 安裝方式
方式一、通過 npm 使用
將 clipboard.js 安裝為運行時依賴
npm install clipboard --save
方式二、通過 script 引入
在 clipboard.js 倉庫中的 dist 文件夾中下載 clipboard.min.js,或通過第三方 CDN 引入即可
<script src="dist/clipboard.min.js"></script>
3. clipboard.js 基本使用
首先需要通過傳遞 DOM 選擇器來實例化它,選擇器可以是 html 元素,也可以是 html 元素列表
用一個元素當觸發(fā)器來復(fù)制另一個元素的文本,data-clipboard-target
屬性后需要跟屬性選擇器
下面是一個簡單的使用示例:
<script src="./dist/clipboard.min.js"></script>
<input type="hidden" value="liang" id="foo">
<button class="btn" data-clipboard-target="#foo">復(fù)制</button>
<script>
new ClipboardJS('.btn');
</script>
可以通過 data-clipboard-action
屬性指定是 拷貝(copy) 還是 剪切(cut) 操作
<button class="btn" data-clipboard-target="#foo" data-clipboard-action="cut">復(fù)制</button>
也可以通過屬性復(fù)制文本,不需要另一個元素當觸發(fā)器,可以使用 data-clipboard-text
屬性,在后面放上需要復(fù)制的文本
<button class="btn" data-clipboard-text="hello vue">復(fù)制</button>
4. clipboard.js 事件監(jiān)聽
當復(fù)制/剪切成功時如果想要給個提示,可以使用下面方法監(jiān)聽其操作
const clipboard = new ClipboardJS('.btn');
clipboard.on('success', function (e) {
// action: copy|cut
// text: 復(fù)制的文本
// trigger: 點擊的dom元素
const { action, text, trigger } = e
console.info('Action:', action);
console.info('Text:', text);
console.info('Trigger:', trigger);
// 取消選中
e.clearSelection();
});