element-ui 复制单元格内容到剪切板

在element-ui中点击单元格进行单元格内容的复制

1. 使用document.execCommand(‘copy’)命令进行复制

<el-table @cell-click="handleCellClick">
	<el-table-column></el-table-column>
</el-table>

//js
methods:{
    
    
	copyClipboard(data, txt = "") {
    
    
      let url = data;
      let oInput = document.createElement("input");
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      this.$notify({
    
    
        title: "提示",
        message: `${
      
      txt} ${
      
      data} 复制到剪切板成功`,
        type: "success",
        duration: 1000
      });
      oInput.remove();
    },
    
    
    handleCellClick(row,column,cell,event){
    
    
    	this.copyClipboard(row.cardId,'卡号')
    }
}

2. 使用navigator 上面的 clipboard(剪切板对象)进行复制

tips:

1. navigator在localhost上面打印是undefined，可以在127.0.0.1上面打印出来
2. 可以在http或者https上面打印出来
3. 在本地192开头的域名端口也是打印不出来的
   4.这是谷歌浏览器的安全机制，现在谷歌很多api都是在http、https环境下面才能打印出来的

methods:{
    
    
	//定义copy方法
	copy:(text)=>navigator.clipboard.writeText(text)
}