vue中使用clipboard.js实现复制功能

本文仅介绍vue中通过npm安装使用的方法，cdn文件下载使用方法可自行查看官方文档clipboardjs.com

1、npm安装：

npm install clipboard --save 
复制代码

2、建议在需要使用的组件引入:

import Clipboard from 'clipboard'复制代码

3、在created中初始化clipboard可能会出问题，建议在mounted中初始化js。

mounted() {
    const clipboard = new Clipboard(".copy-link");
	clipboard.on("success", function(e) {
  		window.weui.toast("复制成功", 2000);
	  	e.clearSelection();
	});
	clipboard.on("error", function(e) {
  		window.weui.topTips("复制失败", 2000);
	});
}
复制代码

附上html结构

<span id="phone">{{ phone }}</span>
<a class="copy-link" data-clipboard-target="#phone">复制</a>
复制代码

至此大功告成

转载于:https://juejin.im/post/5ceb80e8518825332d13c939