首先是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