clipboard.js 用于实现 点击复制,根据官方文档,我如下写了一个例子,
结构:
<a href="javascript:;" onclick="shareCopyUrl(this)" data-clipboard-text="https://www.baidu.com/">点击复制</a>
js:
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.min.js"></script>
<script>
function shareCopyUrl(that) {
var clipboard = new ClipboardJS(that);
clipboard.on('success', function (e) {
console.info('Text:', e.text);
e.clearSelection();
});
clipboard.on('error', function (e) {
// console.error('Action:', e.action);
// console.error('Trigger:', e.trigger);
});
// 处理第一次点击不成功
clipboard.onClick(event);
}
</script>
// 处理第一次点击不成功
clipboard.onClick(event);
vue-template:
import Clipboard from 'clipboard';
export default function handleClipboard(text,event){
const clipboard = new Clipboard(event.target,{
text:()=>text
})
clipboard.on('success',() => {
clipboard.destroy()
})
clipboard.on('error',() =>{
clipboard.destroy()
})
clipboard.onClick(event)
}