好资源导航 » 文章资讯 » Vue实现剪贴板复制功能

Vue实现剪贴板复制功能

2023-08-03 17:42:08 64

小白单纯记录一下工作中遇到的需求:在vue中如何实现复制功能（注：依赖第三方插件clipboard）

一.安装插件

第一种直接npm安装：npminstallclipboard--save

第二种：（下载地址：https://clipboardjs.com/）

二.全局注入（main.js）

importVueClipboardfrom'vue-clipboard2'

Vue.use(VueClipboard)

三.封装方法方便多次使用

新建一个index.js文件里面存放项目会多次使用的方法

exportdefault{
install(Vue,opstion){
//把方法写在vue原型方便调用
Vue.prototype.copy=function(value){
this.$copyText(
`${value}`
).then(res=>{
//这是element的Message消息提示组件
this.$message({
message:"复制成功",
type:"success"
});
},
err=>{
this.$message.error("复制失败");
}
);
},
}
}

四.在需要复制的页面中调用copy方法

总结

以上所述是小编给大家介绍的Vue实现剪贴板复制功能，希望对大家有所帮助！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
514930285
czq8825@qq.com

Vue实现剪贴板复制功能

热门推荐

随机推荐