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实现剪贴板复制功能，希望对大家有所帮助！
相关文章
vue3中require报错require is not defined问题及解决
这篇文章主要介绍了vue3中require报错require is not defined问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
Vue.extend和VueComponent的关系源码解析
这篇文章主要为大家详解了Vue.extend和VueComponent的关系源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
最近公司新启动了个项目，用的是vue框架在做,下面这篇文章主要给大家介绍了关于vue实现token登录验证的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-04-04
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
这篇文章主要介绍了Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了Ant Design Vue 修改表格头部样式,首先用到的是customHeaderRow这个API，类型是一个函数，本文通过完整代码给大家详细讲解，需要的朋友可以参考下2022-10-10
这篇文章主要为大家详细介绍了vue搭建多页面多系统应用的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-06-06
众所周知Element是一套Vue.js后台组件库,它能够帮助你更轻松更快速地开发后台项目,下面这篇文章主要给大家介绍了关于使用Element进行前端开发的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
vue中路由跳转的多种方式(和$router下路由跳转的那几个方法的区别)
Vue.js是一款流行的前端JavaScript框架,它提供了多种方式来实现路由跳转,本文给大家分享vue中路由跳转的几种方式（和$router下路由跳转的那几个方法的区别）,感兴趣的朋友一起看看吧2023-11-11
axios是一个基于Promise,同时支持浏览器端和Node.js的HTTP库，常用于Ajax请求。这篇文章主要介绍了vue axios数据请求get、post方法的使用 ,需要的朋友可以参考下2018-09-09
这篇文章主要介绍了使用Vue开发自己的Chrome扩展程序过程详解，浏览器扩展程序是可以修改和增强 Web 浏览器功能的小程序。它们可用于各种任务，例如阻止广告，管理密码，组织标签，改变网页的外观和行为等等。,需要的朋友可以参考下2019-06-06
最新评论