js 复制功能,点击按钮实现复制功能
作者:米爸爸发布时间:2023-06-02分类:电脑网络维修浏览:500评论:0
导读:方法一:pc端和手机端通用<div class="my-invitation-num-data"><span id=&qu...
方法一:pc端和手机端通用
<div class="my-invitation-num-data"><span id="copycode">{{inviteCode}}</span></div> <van-button class="copy-btn" @click="handleCopy">复制</van-button>
用原生的document.execCommand(‘copy’)的方式实现,移动端(安卓,iOS兼容)和PC端都可以使用
//方法一:用原生的document.execCommand(‘copy’)的方式实现,移动端和PC端都可以使用 //效果:点击复制按钮,复制想复制的区域,例如复制邀请码功能实现 handleCopy(){ const range = document.createRange(); 创建range对象 range.selectNode(document.getElementById('copycode')); //获取复制内容的 id 选择器 const selection = window.getSelection(); //创建 selection对象 if (selection.rangeCount > 0) selection.removeAllRanges(); //如果页面已经有选取了的话,会自动删除这个选区,没有选区的话,会把这个选取加入选区 selection.addRange(range); //将range对象添加到selection选区当中,会高亮文本块 document.execCommand('copy'); //复制选中的文字到剪贴板 this.$toast('复制成功') selection.removeRange(range); // 移除选中的元素 }
方法二:pc端和手机端通用
<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();//删除动态创建的节点 }
方法三:使用第三方实现 clipboard.js
使用第三方框架clipboard的方式实现,移动端默认浏览器不兼容,PC端可以使用
handleCopy(){ navigator.clipboard.writeText(this.inviteCode).then(() => { this.$toast('复制成功') }) }
转自https://blog.csdn.net/cplvfx/article/details/125327124
打赏
收藏
点赞
标签:js 复制功能
相关推荐
你 发表评论:
欢迎- 电脑网络维修排行
-
随机文章
热评文章
热门文章
-
小学数学苏教版六年级上册期末试卷及详案2023-04-15 阅读(692)
-
佳能系列CANON IR C3020 进入维修模式2023-04-22 阅读(1435)
-
兄弟一体机7360打印卡纸报错 无法打印362023-04-25 阅读(927)
-
HTML5吃豆人游戏和源码2023-04-29 阅读(562)
-
笔记本台式机电脑 “睡眠和休眠”有什么区别,那个更省电2023-05-05 阅读(581)
-
袁腾飞主讲《腾飞五千年》合集视频2023-05-06 阅读(933)
-
中文维修手册 兄弟DCP9055CDN_MFC9465CDN维修手册2023-05-06 阅读(590)
-
刘慈欣《三体》科幻有声剧 729声工厂 央视广播 王明军 青雪 哈哈笑 有声小说合集2023-05-08 阅读(765)
-
兄弟HL5580D_5585D_5590DN_5595DN中文维修手册2023-05-11 阅读(722)
-
免费 FTP 客户端 FTP Rush 3.5.5 中文免费版(支持 Windows Linux Mac OS )2023-05-13 阅读(682)
-
富士施乐SC2020维修手册2023-05-13 阅读(502)
-
三星SCX-4521F4321数字激光多功能机中文版维修手册2023-05-14 阅读(497)
-
大王饶命有声小说全集_刺儿播讲 下载解压2023-05-14 阅读(692)
-
万兴PDF专家 PDFelement v10.3.8 繁体中文破解版(附破解补丁)PDF编辑器2024042023-05-22 阅读(549)
-
柯尼卡美能达 柯美 bizhub C266 C226 C256 彩色复印机维修手册2023-05-26 阅读(1117)
-
60套进销存管理系统excel表格模板免费下载2023-06-07 阅读(1425)
-
永隆新版固定资产管理软件系统单机免费增强版2023-05-30 阅读(1945)
-
爱普生L805 原版epson清零软件2023-05-29 阅读(1075)
-
文件视频图片修复工具 Wondershare Repairit (万兴)v4.0.5.4 破解版(附破解补丁)2023-04-18 阅读(1854)
-
门诊电子处方软件4.0( 内含注册码)打印系统2023-07-01 阅读(702)
-
兄弟彩色喷墨打印机 DCP-T220T420WT425WT428WT520WT720DWT725DWT820DWMFC-T920DW中文维修手册2023-05-08 阅读(1339)
-
爱普生清零软件EPSON_L13002023-05-30 阅读(738)
-
129个奔图维修手册2023-04-28 阅读(1468)
-
爱普生ME offce ME1100中文版 清零软件2023-12-21 阅读(612)
-
柯美 柯尼卡美能达 bizhub C286i C266i C226i 彩色复印机中文维修手册2023-05-26 阅读(995)
-
柯尼卡美能达 柯美 bizhub C266 C226 C256 彩色复印机维修手册2023-05-26 阅读(1117)
-
傲软视频下载王 Apowersoft Video Download v6.5.0 绿色破解版2023-11-15 阅读(438)
-
HitPaw Watermark Remover 2.3.0.8视频图片AI去水印免费中文2023-09-13 阅读(624)
-
柯美 柯尼卡美能达 bizhubC650i C550i C450i C750i 750i 彩色复印机中文维修手册2023-06-01 阅读(807)
-
全系列打印机复印机1280本维修手册维修资料拆机手册合集2023-05-25 阅读(1973)
-
富士施乐S2011 S2110 S1810 2150 2350 2520 网络IP地址设置方法2023-04-15 阅读(16670)
-
柯尼卡美能达复印机bizhub C226/C266系列扫描功能设置步骤(内有ftp utilitystup下载)2023-04-25 阅读(13107)
-
大奉打更人有声小说全集-头陀渊-大斌-丸子播讲2023-04-23 阅读(6766)
-
东芝2010AC 2110ac复印机 出现CD40故障 废粉盒满了2023-04-13 阅读(6215)
-
富士施乐复印机提示更换定影组件R8 清零 解决方案2023-05-26 阅读(3399)
-
兄弟T420 T425w喷墨一体机清洗打印头设置方法2023-04-15 阅读(3216)
-
凡人修仙传有声小说全集_大灰狼播讲免费下载2023-04-15 阅读(2978)
-
富士施乐系列xerox SC2022 进入维修模式方法2023-04-21 阅读(2758)
-
佳能全系列型号清零软件超级版2023最新版永久可复制万能版本V22023-06-04 阅读(2274)
-
富士施乐s2110 s2011 s1810系列机器载体初始化步骤2023-05-02 阅读(2158)
-
凡人修仙之仙界篇有声小说全集_大灰狼播讲(经典玄幻修仙)免费下载2023-04-15 阅读(2099)
-
全系列打印机复印机1280本维修手册维修资料拆机手册合集2023-05-25 阅读(1973)
-
中控考勤机软件安装包-Zktime5.0考勤软件(新界面风格体温版本)2023-04-17 阅读(1973)
-
爱普生清零软件EPSON_L1210_L3219_L3210_L3250_L3251_L3260_L52902023-05-29 阅读(1965)
-
永隆新版固定资产管理软件系统单机免费增强版2023-05-30 阅读(1945)
- 网站分类
- 标签列表
-