在vue使用clipboard.js实现一键复制文本功能
yuyutoo 2024-10-13 00:35 1 浏览 0 评论
需求
最近在做商城项目,有个需求是需要点击复制订单号的,然后就觉得可以使用原生的复制方法和使用第三方库。
浏览器原生方法
这种方式兼容性不是太好,还要看浏览器是否支持,容易采坑。
//在IE中可以用window.clipboardData.setData('text','内容')实现。 //在IE中clipboardData是window的属性,而其他浏览器则是相应的event对象的属性,这实际上是一种安全措施,防止未经授权的访问,为了兼容其他浏览器,所以我们不能通过clipboardData来实现这种操作。 //具体做法: //1.创建一个隐藏的input框 //2.点击的时候,将要复制的内容放进input框中 //3.选择文本内容input.select() //4.这里只能用input或者textarea才能选择文本。 //5.执行浏览器的复制命令document.execCommand("copy")。 function copyText() { var text = document.getElementById("text").innerText; // 获取要复制的内容也可以传进来 var input = 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
- 我们要先安装
npm install clipboard --save
2.在mian.js中引入,当然我们也可以在用到的.vue中引入,因为我不止一个地方用到了复制,所以直接在main.js里面引入了。
import clipboard from 'clipboard'; //注册到vue原型上 Vue.prototype.clipboard = clipboard;
3. 在需要的地方使用
//dom ··· <div class="sn Lfll Lmr20">订单编号: <span data-clipboard-action="copy" class="cobyOrderSn" :data-clipboard-text="orderData.orderSn" @click="copyLink">{{orderData.orderSn}}</span> </div> ··· //js ··· copyLink() { let _this = this; let clipboard = new this.clipboard(".cobyOrderSn"); clipboard.on('success', function () { _this.$toast("复制成功") }); clipboard.on('error', function () { _this.$toast("复制失败") }); } ···
当然clipboard.js的功能可不止这么简单,我们还可使用它进行剪切,还可以通过它复制其他元素的值等,具体的使用可查看官方文档:clipboard.js;
小结
关于浏览器一键复制,推荐使用clipboard.js来做,因为现在原生方法兼容性并不是很好,而且clipboard.js文件并不大,但是却可以帮我们做很多事情,减轻很多调试和避免采坑。以上只是记录一下自己遇到的问题,如有错误,还请指正,如有帮助,请关注点赞哈。
作者:Yinzhishan
链接:https://www.jianshu.com/p/8814d526bca9
相关推荐
- 《亲爱的》特效真厉害,一块绿布贯彻全集,不得不佩服李现的演技
-
说起《亲爱的热爱的》这部电视剧,相信很多人并不陌生,这部电视剧让男演员李现因此爆红,其实李现是一个非常有潜力的男演员,他的表现也非常的精彩。但是大家都知道,在每一部电视剧中都有特效的存在,这部电视剧也...
- 充分运用AI特效,京剧电影《大唐贵妃》正式开机
-
“当唱到‘在天愿为比翼鸟,在地愿为连理枝’的时候,会从演员身后飞起一只巨大无比的比翼鸟,鸟在空中盘旋,刮起的风甚至会吹过角色的脸……”11月10日,电影《大唐贵妃》在上海车墩影视基地正式开机,这是第一...
- 工业光魔:没有PS的年代,特效怎么做?
-
大家好,我是戴着眼镜拿着话筒的阿拉斯加,片片。昨天,我给大家简单介绍了传奇特效公司——工业光魔的起源。...
- 价值13亿的“爽片”上映,每一帧都是钱砸出来的特效,却无缘国内
-
在七月二号的时候;美国在网络上面上映了一部大制作的“爽片”《明日之战》。...
- 影视特效是怎么制作出来的?来,一起体验吧!
-
电影是人们生活中不可缺少的一部分,是视觉与听觉相结合的现代艺术。悲剧、喜剧、亲情、友情、爱情都是它所能展现的内容。影视艺术有哪些独有的特征?什么是蒙太奇?全息影片又是什么意思?最近,少儿频道的一档节目...
- ps五分钟学会自己制作“特效”
-
嗨,欢迎观看本期的摄影后期教学。那就是教大家一个特别炫酷,特别实用的ps“特效”光!有同学会问,“啊,特效光是不是特别难,我一点ps都不会!”咳咳不要着急,karry的教学都是针对ps零基础的同学的,...
- 抖音这个特效太扎心,无数网友看着看着就哭了……
-
2078年的你,会是什么样子?最近,抖音上一款特效火了。它可以让你看到自己从现在到2078年的容貌变化,你可以一点点看着皱纹爬上眼角,白发布满双鬓。看着看着,很多网友就哭了。有人说,一辈子很长却也很短...
- 《爱情公寓》的特效有多好?这集花了300万,网友看不出来特效
-
对于有些电视剧来说,特效那可是相当重要的一个部分了。尤其是对那些科幻片和一些玄幻类的电视剧就更加了。一部剧或者是影片特效的好坏,直接就影响了这个作品的质量。首先就让我们来看一下电视剧孤芳不自赏吧!里面...
- 窗花剪纸、鸭头滤镜、潜艇王者…… 揭秘抖音特效那些事儿
-
更多往期「Byte漫来了」系列漫画,可点击阅读:...
- 原来影视剧中的“光头”全是这样弄的 观众被骗了许多年
-
不管是电影还是电视剧,都会有光头因为是剧情的需要,那么她们的光头会是怎么弄的呢?一直都以为那些演员都是要真的剃光头,看到这些照片后,才知道深深的被骗了许多年。在影视中,常常看到演员有光头的戏,她在外出...
- 这些特效给几分?春晚舞台显示技术盘点
-
[中关村在线投影机频道原创]从1983年开始,春晚成为国人大年三十晚上最期待的一场精神盛宴。直播式节目播出方式,各类表演大师云集舞台,相声小品歌舞欢聚一堂,这是很多家庭一年中最欢乐的时刻,而春晚,则是...
- 11 款六元秒杀特效对比,哪个赢了不知道,貂蝉一眼输了
-
已经上线了11款六元秒杀皮肤,其中部分是升级后的“伴生皮”,也就是英雄的首款皮肤,首周六元之后恢复原价488点券。无论是何种形式的六元皮肤,不得不说他们的质量都非常好,这11款皮肤的特效对...
- 《半条命2 RTX》上架Steam 光追特效+4K效果
-
《半条命2RTX》现已在Steam平台正式上架,这款屡获殊荣的游戏以其沉浸式的故事、惊险的战斗和令人费解的物理特性吸引了全球数百万玩家,游戏现已经新增全面光追、物理纹理以及增强的多边形效果进行了彻底...
- 微信又有新玩法?多种好看特效可选择,赶快安排上
-
今日分享:手机特效适用系统:安卓今天小雷又发现了一个好玩的东西,就是手机加上特效也太好看了吧!早上上班的时候发现同事打开微信后,微信页面居然下起了樱花雨。看了同事的微信页面小雷我真的觉得太好玩太好看了...
- 判若两人!揭秘好莱坞的特效化妆过程
-
好莱坞的特效化妆牛到什么程度呢?可以把美人化妆成丑八怪,把黑人化妆成白人,把年轻人化妆成老人,把女人化妆成男人,把男人化妆成女人,把普通人化妆成怪物、外星人甚至异鬼……来见识一下这些神奇化妆术的“变...
你 发表评论:
欢迎- 一周热门
- 最近发表
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)