700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > vue获取剪切板内容_vue通过clipboard插件实现复制到剪切板功能

vue获取剪切板内容_vue通过clipboard插件实现复制到剪切板功能

时间:2024-07-17 23:37:31

相关推荐

vue获取剪切板内容_vue通过clipboard插件实现复制到剪切板功能

1、在package.json添加依赖"dependencies":{

"clipboard":"^2.0.0"

}

2、页面引入clipboardimportClipboardfrom'clipboard';

3、给触发复制事件的按钮增加class,增加点击事件

H函数实现:h('Button',{

props:{

type:'info',

size:'small',

icon:'ios-link'

},

class:['link-copy'],

on:{

click:()=>{

this.copyLink(params.row)

}

}

},'')

页面实现:新建

4、method中写入点击事件copyLink(row){

//复制访问链接

constclipboard=newClipboard('.link-copy',{

//点击copy按钮,直接通过text直接返回复印的内容

text:()=>row.webSiteVisitUrl,//该文本则为需要复制的内容

});

//通过传递DOM选择器,HTML元素或HTML元素列表实例化

clipboard.on('success',(e)=>{

this.$Message.success('拷贝到剪切板成功!');

e.clearSelection();

//释放内存

clipboard.destroy();

});

clipboard.on('error',(e)=>{

//不支持复制

this.$Message.error({

content:`该浏览器不支持自动复制,请手动复制链接:${e.text}`,

duration:30,

closable:true

});

//释放内存

clipboard.destroy();

});

}

本文为胖虎原创文章,转载无需和我联系,但请注明来自胖虎博客

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。