js复制文字到粘贴板方法，方便好用，代替vue-clipboard2/vue-clipboard3

最新推荐文章于 2024-04-26 07:33:06 发布

HolleBug

最新推荐文章于 2024-04-26 07:33:06 发布

阅读量245

点赞数 2

分类专栏： WEB前端文章标签： javascript vue.js 前端 vue3

本文链接：https://blog.csdn.net/qq_45364616/article/details/125187022

版权

WEB前端专栏收录该内容

24 篇文章 3 订阅

订阅专栏

由于vue-clipboard2不适用于Vue3，作者在 vant 源码中发现了一个简单的复制到剪贴板的方法。该方法通过创建隐藏的 textarea 元素，选中并执行 copy 命令实现文本复制，解决了在Vue3环境下复制功能的问题。

摘要由CSDN通过智能技术生成

	function copyToClipboard(str) {
		const el = document.createElement('textarea');
		el.value = str;
		el.setAttribute('readonly', '');
		el.style.position = 'absolute';
		el.style.left = '-9999px';
		document.body.appendChild(el);
		const selection = document.getSelection();
		if (!selection) {
			return;
		}
		const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) :false;
		el.select();
		document.execCommand('copy');
		document.body.removeChild(el);
		if (selected) {
			selection.removeAllRanges();
			selection.addRange(selected);
		}
	}

因为vue-clipboard2不能在vue3使用了，所以想在网上找解决方法，结果想看文章不是付费就是要订阅，本来就是个简单方法，用不是什么高级内容。。，感到很无语

突然在vant的源码里发现了这个方法，因此分享给大家