当前位置: 首页 > 工具软件 > Clipboard.js > 使用案例 >

clipboard.js实现复制粘贴

匡凌
2023-12-01

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

 

 

 

 

 类似资料: