js点击按钮复制值到剪贴板中

js调用剪贴板

• 效果如下：
  
• 打开系统剪贴板，可以看到刚刚复制的内容
  
• 代码如下：

<button @click='linkUrl(item)'>点击复制</button>

linkUrl(item){
	let url = item.url;//拿到想要复制的值
	let copyInput = document.createElement('input');//创建input元素
	document.body.appendChild(copyInput);//向页面底部追加输入框
	copyInput.setAttribute('value', url);//添加属性，将url赋值给input元素的value属性
	copyInput.select();//选择元素
	document.execCommand("Copy");//执行复制命令
	this.$message.success("链接已复制！")
}

刚开始是这样写的，会存在一个问题，每点击一次按钮页面底部就会出现很多输入框

解决方法

• 添加隐藏属性

copyInput.setAttribute('style', "display:none");//添加隐藏属性

虽然可以达到效果，但是节点中会存在大量input元素，不太理想，继续优化代码

• 复制后删除该元素(最优)

copyInput.remove();

最终代码

<button @click='linkUrl(item)'>点击复制</button>

linkUrl(item){
	let url = item.url;//拿到想要复制的值
	let copyInput = document.createElement('input');//创建input元素
	document.body.appendChild(copyInput);//向页面底部追加输入框
	copyInput.setAttribute('value', url);//添加属性，将url赋值给input元素的value属性
	copyInput.select();//选择input元素
	document.execCommand("Copy");//执行复制命令
	this.$message.success("链接已复制！");//弹出提示信息，不同组件可能存在写法不同
	//复制之后再删除元素，否则无法成功赋值
	copyInput.remove();//删除动态创建的节点
}

如果大家有更好的解决办法可以交流一下