clipboard.js实现复制粘贴

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)
}

 

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值