elementui copy function, no need to download plug-in pure native implementation

Click the copy button to copy the content

insert image description here

The first method: (cumbersome)

<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("复制成功!")
}

Second approach: (simplified)

<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();
}

The above is the content of the problem solving. For details, please refer to the following blog:
https://blog.csdn.net/m0_56390627/article/details/120825974?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2 aggregatepage first_rank_ecpm_v1~rank_v31_ecpm -4-120825974-null-null.pc_agg_new_rank&utm_term=copy%E5%8A%9F%E8%83%BD%E5%AE%9E%E7%8E%B0+elementui&spm=1000.2123.3001.4430 https://blog.csdn
. net/qq_45780380/article/details/121031144?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2-121031144-blog-120825974.pc_relevant_aa&depth_1-utm_source=distribute. pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2-121031144-blog-120825974.pc_relevant_aa&utm_relevant_index=5

Guess you like

Origin blog.csdn.net/li22356/article/details/124816903