概述：項目中遇到復制的需求，復制成功后彈出tost提示
clipboard官網地址：http://www.clipboardjs.cn/
遇到的問題：使用clipboard.on('success')的時候， 第一次復制時沒有走到success的方法里去，第二次才會走success方法，所以點兩次才會彈出toast
ps: 通篇寫法為react寫法。
初始寫法：
npm install clipboard --save
import ClipboardJs from 'clipboard';
const handleCopyClick = (event) => {
const clipboard = new ClipboardJs('.copy');
clipboard.on('success', () => {
Message.success('復制成功')；
clipboard.destroy();
})
}
<span className="copy" data-clipboard-text="復制id" onClick={handleCopyClick}>
<Icon type="copy" />
</span>
改良后寫法：
把clipboard抽出去，寫成一個單獨的js文件
import clipboard from './clipboard.js';
const handleCopyClick = (id, event) => {
clipboard(id, event);
}
<span onClick={(event) => handleCopyClick(id, event)}>
<Icon type="copy" />
</span>
clipboard.js文件：
import ClipboardJs from 'clipboard';
export default function handleClipboard(text, event) {
const clipboard = new Clipboard(event.target, {
text: () => text;
});
clipboard.on('success', () => {
Message.success('復制成功');
clipboard.destroy();
});
clipboard.on('error', () => {
clipboard.destroy();
});
clipboard.onClick(event); // 解決！！
}