vue实现复制功能

Posted 2021-12-20 老张在线敲代码

使用插件：clipboard.js，官网地址：http://www.clipboardjs.cn/

1 通过npm安装clipboard.js

 npm install clipboard

2 在需要使用到复制功能的组件中引入：

import ClipboardJS from 'clipboard';

3 需要被复制的元素标签上要加一个id；然后在复制按钮加一个data-clipboard-target指向元素标签；最后添加一个点击事件

<div id="content">
	dajiwdhaowdiawdhaw
</div>

<div class="copy" data-clipboard-target="#content" @click="handleCopy">
</div>
//复制收货人信息
handleCopy()
  // 括号中的内容：对应复制按钮的class
  let clipboard = new ClipboardJS('.copy');
  clipboard.on('success', function(e) 
	console.log("复制成功");
	e.clearSelection();
  );
  clipboard.on('error', function(e) 
	console.log("复制失败，请重试");
	console.log(e)
  );