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.csdn.net/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.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

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如果你想实现 Element UI 下拉框的复制功能,可以通过以下步骤来实现: 1. 安装 clipboard.js 库 ```bash npm install clipboard --save ``` 2. 引入 clipboard.js 库和 Element UI 组件 ```javascript import Clipboard from 'clipboard' import { Select, Option } from 'element-ui' ``` 3. 创建 Select 组件,并在 Option 上绑定复制事件 ```html <el-select v-model="value" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" ref="option"> <span class="copy-btn" @click="copy(item.value)">复制</span> </el-option> </el-select> ``` 这里我们在 Option 组件上绑定了一个 copy 方法,并且在 copy 方法中调用了 clipboard.js 库来实现复制操作。 4. 在组件的 mounted 钩子函数中初始化 clipboard.js ```javascript mounted() { this.clipboard = new Clipboard('.copy-btn', { text: (trigger) => { return trigger.parentNode.querySelector('.el-select-dropdown__item span').textContent } }) }, ``` 这里我们通过初始化 clipboard.js 时,传入了一个 text 函数来指定复制的内容,这里我们获取了当前 Option 组件的文本内容作为复制的内容,可以根据实际需求来更改复制的内容。 5. 在组件的 beforeDestroy 钩子函数中销毁 clipboard.js ```javascript beforeDestroy() { this.clipboard.destroy() } ``` 这里我们在组件销毁前,通过 clipboard.destroy() 方法来销毁 clipboard.js 实例,避免内存泄漏。 这样就可以实现 Element UI 下拉框的复制功能了。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值