微客导航 » 文章资讯 » 在vue使用clipboard.js进行一键复制文本的实现示例

在vue使用clipboard.js进行一键复制文本的实现示例

2023-08-31 19:24:05 164

需求

最近在做商城项目，有个需求是需要点击复制订单号的，然后就觉得可以使用原生的复制方法和使用第三方库。

浏览器原生方法

这种方式兼容性不是太好，还要看浏览器是否支持，容易采坑。

//在IE中可以用window.clipboardData.setData('text','内容')实现。
//在IE中clipboardData是window的属性,而其他浏览器则是相应的event对象的属性，这实际上是一种安全措施，防止未经授权的访问,为了兼容其他浏览器，所以我们不能通过clipboardData来实现这种操作。
//具体做法：
//1.创建一个隐藏的input框
//2.点击的时候，将要复制的内容放进input框中
//3.选择文本内容input.select()
//4.这里只能用input或者textarea才能选择文本。
//5.执行浏览器的复制命令document.execCommand("copy")。
functioncopyText(){
vartext=document.getElementById("text").innerText;//获取要复制的内容也可以传进来
varinput=document.getElementById("input");//获取隐藏input的dom
input.value=text;//修改文本框的内容
input.select();//选中文本
document.execCommand("copy");//执行浏览器复制命令
alert("复制成功");
}

//在事件中可以通过e对内容进行修饰
document.body.oncopy=e=>{
//监听全局复制做点什么
}
//还有这种写法：
document.addEventListener("copy",e=>{
//监听全局复制做点什么
});

使用clipboard.js

我们要先安装

npminstallclipboard--save

在mian.js中引入，当然我们也可以在用到的.vue中引入，因为我不止一个地方用到了复制，所以直接在main.js里面引入了。

importclipboardfrom'clipboard';
//注册到vue原型上
Vue.prototype.clipboard=clipboard;

在需要的地方使用

//dom
···
订单编号：
{{orderData.orderSn}}

··· //js ··· copyLink(){ let_this=this; letclipboard=newthis.clipboard(".cobyOrderSn"); clipboard.on('success',function(){ _this.$toast("复制成功") }); clipboard.on('error',function(){ _this.$toast("复制失败") }); } ···

当然clipboard.js的功能可不止这么简单，我们还可使用它进行剪切，还可以通过它复制其他元素的值等，具体的使用可查看官方文档：clipboard.js;

小结

关于浏览器一键复制，推荐使用clipboard.js来做，因为现在原生方法兼容性并不是很好，而且clipboard.js文件并不大，但是却可以帮我们做很多事情，减轻很多调试和避免采坑。以上只是记录一下自己遇到的问题，如有错误，还请指正，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
3162201930
czq8825@qq.com

在vue使用clipboard.js进行一键复制文本的实现示例

热门推荐

随机推荐