vue 复制内容到粘贴板

  • Z时代
  • 2024-01-10
  • 分类：综合

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窗，原因是粘贴板对象未被释放。

以上是 vue 复制内容到粘贴板 的全部内容， 来源链接： utcz.com/z/380728.html

回到顶部