Vue+ElementUI+clipbords.js实现点击复制功能

一、目标

1. 通过点击某个按钮，实现指定的目标内容复制到剪切板

二、引入需要的资源

2. 安装ElementUI组件库 直通车
3. ClipboardJs官网 直通车
4. 安装ClipboardJs npm install clipboard --save
5. 安装完成后用import Clipboard from 'clipboard'导入Clipboard.js

三、给按钮和复制对象绑定id和class名称以及绑定事件

 <p>订单编号：
   <span id="link">2021013001154231</span>
   <span class="fuzhi-btn"
   	@click="copyLink"
   	data-clipboard-action="copy"
  	data-clipboard-target="#link">
  	复制
   </span>
 </p>

data-clipboard-action： 默认值是copy复制，也可以写cut,但是cut只能用在输入框或者文本域
data-clipboard-target： 是指向你要复制的节点，这里传入节点id(#link)

四、对应事件

在methods中写入对应事件

copyLink(){
  let clipboard = new Clipboard('.fuzhi-btn');
  clipboard.on('success', ()=> {
     this.$message({
	 type: "success",
	 message: "复制成功",
	 duration: 1500,
	 showClose: true,
     });
     clipboard.destroy();// 使用destroy清除缓存
   });
   clipboard.on('error', ()=> {
       this.$message({
            message: 'Copy error',
            type: 'error',
            duration: 1500
       });
       clipboard.destroy(); // 使用destroy清除缓存
   })
}