vue 复制内容到粘贴板

简介: vue 复制内容到粘贴板

首先是npm安装依赖包:npm install clipboard --save


导入组件:import Clipboard from "clipboard";


html如图:

  


class="copy",用于下面的JS中获取当前复制按钮这个对象,data-clipboard-text是表示复制当前的属性,属性值我这里用的变量Code,大家注意一下,data-clipboard-text前面带上 " :"号,否则Code会被视作字符串处理,而非自定义的变量。@click绑定了一个自定义的copy事件,下面我们看一下:

  


copy事件里,通过on给复制按钮绑定了两个事件,success和error,分别是复制成功和失败,考虑到潜在的兼容性问题,最好留下error提示,比较友好。


以上就是vue项目里复制粘贴的教程,如果帮助到了你,请点个赞哟。


附上Github详细教程:https://github.com/zenorocha/clipboard.js


2019年5月9日17:18:45 BUG修复:

  


message下面改成如图所示,才是正确的清理方式, 否则重复点击会一直弹message窗,原因是粘贴板对象未被释放。

 

PS:楼主邮箱 tccwpl@163.com

目录
相关文章
|
9天前
|
JavaScript
vue学习(3)模板语法
vue学习(3)模板语法
42 11
|
1天前
|
JavaScript 前端开发
vue动态添加style样式
vue动态添加style样式
|
9天前
|
存储 JavaScript 前端开发
vue学习(2)
vue学习(2)
199 65
|
9天前
|
JavaScript 算法 前端开发
vue学习(1)
vue学习(1)
199 62
|
1天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem
|
1天前
|
JavaScript
vue中watch的用法
vue中watch的用法
|
8天前
|
JavaScript
vue学习(4)数据绑定
vue学习(4)数据绑定
29 10
|
8天前
|
JavaScript 前端开发
vue学习(6)
vue学习(6)
27 9
|
8天前
|
JavaScript 开发者
vue学习(5)
vue学习(5)
23 7
|
5天前
|
JavaScript 前端开发
Vue项目使用px2rem
Vue项目使用px2rem