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

以上就是问题解决的内容,具体详细内容可以参考以下博客:
https://blog.youkuaiyun.com/m0_56390627/article/details/120825974?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2aggregatepagefirst_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.youkuaiyun.com/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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值