vue实现复制功能

最新推荐文章于 2025-10-23 18:38:30 发布

原创最新推荐文章于 2025-10-23 18:38:30 发布 · 3.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端开发积累专栏收录该内容

9 篇文章

订阅专栏

在Vue项目中，可以通过创建隐藏input元素，设置其value为链接地址，然后选中并执行复制命令来实现在点击按钮时复制链接。具体做法包括在模板中添加按钮触发事件，以及在JavaScript中实现复制逻辑，最后弹出提示信息告知用户复制成功。

项目开发中遇到该场景，如果有原创内容地址，请告知，谢谢。

项目场景：

项目中有一链接地址，点击按钮，将该链接内容复制。

解决方案：

一、vue代码

<el-button
	size="small"
	type="primary"
	@click.stop="copyAddress"
>复制地址</el-button>

二、js部分

copyAddress() {
	let oInput = document.createElement("input");
	//这边为链接地址this.liveLink='www.baidu.com'
	oInput.value = this.liveLink;
	document.body.appendChild(oInput);
	oInput.select();
	console.log(oInput.value);
	document.execCommand("Copy");
	oInput.remove();
	this.$message({
		message: "复制成功",
		type: "success",
	});
},