Vue实现剪贴板复制功能
更新时间：2019年12月31日 08:56:24 作者：NeverSettle
这篇文章主要介绍了Vue实现剪贴板复制功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
小白单纯记录一下工作中遇到的需求:在vue中如何实现复制功能 （注： 依赖第三方插件 clipboard）
一. 安装插件
第一种直接npm安装： npm install clipboard --save
第二种： <script src="js/clipboard.min.js"></script>（下载地址：https://clipboardjs.com/）
二. 全局注入（main.js）
import VueClipboard from 'vue-clipboard2' Vue.use(VueClipboard)
三. 封装方法方便多次使用
新建一个index.js文件里面存放项目会多次使用的方法
export default{
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方法
<template>
<el-tooltip class="item" effect="dark" content="复制" placement="bottom">
<i class="icon copy iconfont" @click.stop="copyCode()"></i>
</el-tooltip>
</template>
<script>
//直接调用copy方法就可以了
copyCode(scope) {
//把需要复制的内容传value
this.copy(scope.row.date);
},
</script>
总结
以上所述是小编给大家介绍的Vue实现剪贴板复制功能，希望对大家有所帮助！
相关文章
基于Vue+Openlayer实现动态加载geojson的方法
本文通过实例代码给大家介绍基于Vue+Openlayer实现动态加载geojson的方法，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2021-09-09
这篇文章主要介绍了vue-router 实现导航守卫（路由卫士）的实例代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-09-09
这篇文章主要为大家介绍了vue3 emits事件使用示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-07-07
浅谈vue 组件中的setInterval方法和window的不同
这篇文章主要介绍了浅谈vue 组件中的setInterval方法和window的不同，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue 项目中实现按钮防抖方法,首先需要新建 .js文件存放防抖方法，引入防抖文件,methods中添加方法，本文结合示例代码给大家介绍的非常详细，需要的朋友可以参考下2022-12-12
在Vue组件中,computed属性是在组件的选项对象中声明的,你可以把它们想象成组件的一个小功能,告诉Vue当某些数据变化时,如何更新界面,本文给大家介绍了Vue.js使用computed属性实现数据自动更新,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了vue 3.0 vue.config.js文件常用配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了详解vue中localStorage的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
这篇文章主要为大家详细介绍了Vue2.0实现调用摄像头进行拍照功能，以及图片上传功能引用exif.js，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
el-select单选时选择后输入框的is-focus状态并没有取消问题解决
这篇文章主要给大家介绍了关于el-select单选时选择后输入框的is-focus状态并没有取消问题的解决过程,文中通过图文以及代码示例将解决的办法介绍的非常详细,需要的朋友可以参考下2024-01-01
最新评论