点击复制按钮实现内容复制
第一种方法:(繁琐)
<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