elementui 复制功能,无需下载插件纯原生实现

点击复制按钮实现内容复制

第一种方法:(繁琐)

<div slot="footer" class="dialog-footer">
        <el-button @click="show=false"  size="mini">关 闭</el-button>
        <el-button @click="handleSubmit()" size="mini" type="primary">复制</el-button>
</div>

handleSubmit() {
          
   
	let name = this.processModelInfo.name;  //每一行的某个值,如选中的当前行的url
	let key = this.processModelInfo.key;
	   var input = document.createElement(input);     //创建一个隐藏input(重要!)
	   input.value = name+,+key;    //拼接多个赋值
	   document.body.appendChild(input);
	   input.select(); // 选择对象
	   document.execCommand("Copy"); // 执行浏览器复制命令
	   input.className = oInput;
	   input.style.display=none;
	   this.$message.success("复制成功!")
}

第二种方法:(简化)

<div slot="footer" class="dialog-footer">
        <el-button @click="show=false"  size="mini">关 闭</el-button>
        <el-button @click="handleSubmit()" size="mini" type="primary">复制</el-button>
</div>

handleSubmit() {
          
   
	let name = this.processModelInfo.name;  //每一行的某个值
	let key = this.processModelInfo.key;
	var copyContent = document.createElement(input);     //创建一个隐藏input(重要!)
	copyContent.value = name + "," + key;    //拼接多个赋值
	document.body.appendChild(copyContent);
	copyContent.select(); // 选择对象
	document.execCommand("Copy"); // 执行浏览器复制命令
	this.$message.success("复制成功!");
	copyContent.remove();
}
经验分享 程序员 微信小程序 职场和发展