Vue+ElementUI+clipboard.js点击按钮实现复制功能

最新推荐文章于 2025-09-24 09:42:43 发布

苏宛墨

最新推荐文章于 2025-09-24 09:42:43 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： ElementUI Vue 文章标签： vue

本文链接：https://blog.csdn.net/TingLogin/article/details/112611294

Vue 同时被 2 个专栏收录

5 篇文章

订阅专栏

ElementUI

2 篇文章

订阅专栏

本文介绍了如何利用ElementUI和ClipboardJS在Vue项目中实现一键复制功能。通过给按钮绑定特定的id和class，并在methods中定义事件处理函数，实现了点击按钮后将指定内容复制到剪切板。成功复制会显示成功提示，复制失败则显示错误提示。此功能适用于前端开发，提升用户体验。

一、目标

通过点击某个按钮，实现指定的目标内容复制到剪切板

二、引入需要的资源

安装ElementUI组件库直通车
ClipboardJs官网直通车
安装ClipboardJs npm install clipboard --save
安装完成后用import Clipboard from 'clipboard'导入Clipboard.js

三、给按钮和复制对象绑定id和class名称以及绑定事件

 <p>订单编号：
   <span id="link">2021013001154231</span>
   <span class="fuzhi-btn"
   		 @click="copyLink"
   		 data-clipboard-action="copy"
  		 data-clipboard-target="#link">
  		 复制
   </span>
 </p>

data-clipboard-action： 默认值是copy复制，也可以写cut,但是cut只能用在输入框或者文本域
data-clipboard-target： 是指向你要复制的节点，这里传入节点id(#link)

四、对应事件

在methods中写入对应事件

copyLink(){
	  let clipboard = new Clipboard('.fuzhi-btn');
	     clipboard.on('success', ()=> {
	         this.$message({
	             type: "success",
	             message: "复制成功",
	             duration: 1500,
	             showClose: true,
	         });
	         clipboard.destroy();// 使用destroy清除缓存
	     });
	     clipboard.on('error', ()=> {
	         this.$message({
	             message: 'Copy error',
	             type: 'error',
	             duration: 1500
	         });
	         clipboard.destroy(); // 使用destroy清除缓存
	     })
 	}