js实现浏览器中的复制粘贴

最新推荐文章于 2024-06-15 07:54:41 发布

透明的前端

最新推荐文章于 2024-06-15 07:54:41 发布

阅读量1.3k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Master12138/article/details/107107135

版权

开发过程中难免遇到期望点击可以直接复制链接的情况，这里有两种实现方式

第一种：使用原生的js方式进行实现（MDN已废弃且存在兼容性）

使用原生方法实现时主要用到了document.execCommmand方法，该方法允许运行命令来操作可编辑内容区域的元素

语法：

boolean=document.execCommand(aCommandName,aShowDefaultUI,aValueArgument)

返回值：一个Boolean,如果是false则表示操作不被支持或未被启用

参数：

aCommandName
一个DOMString，命令的名称
aShowDefaultUI
一个Boolean,是否展示用户界面，一般为false
aValueArgument
一些命令需要的额外参数，默认为null

常用命令：

copy
拷贝当前选中内容到剪切板。启用这个功能的条件因浏览器不同而不同，而且不同时期，其启用条件也不尽相同。使用之前请检查浏览器兼容表，以确定是否可用
cut
剪切当前选中的文字并复制到剪贴板，功能注意事项同上

方法：

copy(value){
	let outInput=document.createElement("input");
	outInput.value=value;
	document.body.appendChild('outInput');
	outInput.select();//选择对象
	document.execCommand("copy");//执行copy命令
	outInput.style.display="none";
}

第二种：使用vue-clipboard2 （clipboard.js）

安装：

nam i vue-clipboard2 -s

项目引入：

//mian.js下引入
import VueClipboard from 'vue-clipboard2'
Vue.use(VueClipboard)

使用：

<span>{{text}}</span>
<button v-clipboard:copy='text'
		v-clipboard:suucess='copySuccess'
		v-clipboard:error='copyError'></button>

methods:{
	copySuccess(e){},
	copyError(e){}
}