前言
由于最近项目需要文本复制功能，浏览一圈决定使用 Clipboard.js，但在使用的过程中遇到不少坑，特此记下以备索引。
基本使用
- 引用
支持引用的方式有多种，如普通页面引用
<script src="dist/clipboard.min.js"></script>
AMD/ES6 Module引用
npm i clipboard
···
const Clipboard = require('clipboard')
// or
import Clipboard from 'clipboard'
- 基本使用
<!--引用官方示例-->
<!-- Target -->
<input id="foo" value="Hello World">
<!-- Trigger -->
<button class="btn" data-clipboard-action="copy" data-clipboard-target="#foo"></button>
在点击 button 后，将自动会复制 target 内容至粘贴板。
对taget 的操作可以是 copy 或 cut，可以通过data-clipboard-action="cut" 或data-clipboard-action="cut"。当操作类型是cut 时，target的contenteditadble必须为 true。换句话说，当使用剪切时，目标必须为可读写的 textarea或 HTML element的contenteditadble为 true
- 事件监听
可以使用事件监听侦听复制/剪切事件， 然后对复制/剪切的操作结果作处理。使用示例:
// 引用官方文档
var clipboard = new Clipboard('.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);
});
使用事件监听可以对复制/剪切事件的成功与否进行回调。常见的场景是在复制成功后提示用户复制成功，复制失败后提示用户，让其手动复制。
-
注意事项 && 坑
在使用 clipboard.js 复制时，必须有一个由用户手动发起事件，不然调用不成功。但可以采用取巧的办法解决：
/**
* 文本复制
*
* @param {string} text - 要复制的文本
* @param {object} event - 用户触发的事件
*/
const clipboard = (text, event) => {
const cb = new Clipboard('.t', {
text: () => text
})
cb.on('success', (e) => {
cb.off('error')
cb.off('success')
})
cb.on('error', (e) => {
cb.off('error')
cb.off('success')
})
cb.onClick(event)
}
调用时，如
const btn = document.querySelector('.btn')
btn.addEventListener('click', event => {
clipboard('Hello World from clipboard', event)
})
这样，就可以随时调用而不需要创建 DOM了~
如上，如有疑问，欢迎交流~~ 😆
