方法一: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
-
Python 实现一个简单的中文分词处理?
-
有趣的CSS - 多彩变化的按钮
-
让电脑盘符右键中的格式化不起作用——WIN10\WIN8.1测试通过
- Windows 11 上应禁用的 15 项功能
- 编译原理总结(《编译与反编译技术》)
- VB窗体初始最大化和改变窗体大小自动缩放控件及字体
- H.266编码和H.264 H.265编码有什么区别
- 带您快速了解开源/自由软件的历史
- 当前操作系统缺少OCR A Extended等字体,请及时安装所需字体或者重新安装正版操作系统软件,黑体 解决方法
- MySQL 和 MongoDB:如何选择合适的数据库解决方案?
- 了解 iframe 内嵌框架:深度解析其工作原理
- HTML前端复制指定标签中的文字-完整代码
- 栏目导航
- 最新文章
-
-
Python 实现一个简单的中文分词处理?
在Python中,实现一个简单的中文分词处理,我们可以采用基于规则的方法,比如最大匹配法、最小匹配法、双向匹配法等。但更...
-
有趣的CSS - 多彩变化的按钮
这个按钮效果主要使用 :hover 、:active 伪选择器以及 animat...
-
让电脑盘符右键中的格式化不起作用——WIN10\WIN8.1测试通过
以下内容有不妥之处,敬请指正。一、查看当前电脑登录的用户名称按下键盘上的Win+R组合键,打开运行对话框。输入cmd并按...
-
Windows 11 上应禁用的 15 项功能
Windows11具有大量特性和功能,可满足广泛的用户需求。然而,并非所有这些功能都是普遍必要或理想的。 ...
-
编译原理总结(《编译与反编译技术》)
编译原理总结(《编译与反编译技术》)转自CSDN编译原理总结思维导图引论什么是编译程序?编译过程都包括哪些阶段?画出编译...
-
- 热门文章
-
-
当前操作系统缺少OCR A Extended等字体,请及时安装所需字体或者重新安装正版操作系统软件,黑体 解决方法
安装的航天信息开票软件无法打印,提示”“当前操作系统缺少OCRAExtended等字体…”,具体解决方法如下:打印发...
-
带您快速了解开源/自由软件的历史
自由软件运动于1983年发起,但较早的项目符合...
-
H.266编码和H.264 H.265编码有什么区别
相信经常看视频的朋友应该都听说过H.264/AVC、H.265/HEVC这类词语,其实这是视频编码标准,主要作用是将视频...
-
编译原理总结(《编译与反编译技术》)
编译原理总结(《编译与反编译技术》)转自CSDN编译原理总结思维导图引论什么是编译程序?编译过程都包括哪些阶段?画出编译...
-
VB窗体初始最大化和改变窗体大小自动缩放控件及字体
1、模块代码:'标准模块声明写入(自定义类型)Type cp  ...
-
- 最近发表
-
- 施乐 C7780 内部异常 碳粉堵塞,故障/错误代码:093-317
- HP 108w103A 107A开机不通电的检修案例
- 分享几本打印机复印机维修完全学习手册-基础原理入门到精通(免费下载)
- 夏普 MX2300 2700 中文维修手册
- 夏普 SF-1016-1116-2116-2118 中文维修手册
- 夏普 MX363 453 503 4528 中文维修手册
- 夏普 SF2030,2040中文维修手册
- WPS Office 2019 雨糖科技特别版 v11.8.2.12195_r013(支持断网版本)
- 实达BP3000XE打印头针脚位置序号,方便更换快速找出
- 爱普生L565打印机清零软件永久版+图解
-
中醫診斷學(1)SL机型报(1)15158(1)猫腻(2)YT(1)施乐(58)中控(1)DPC2255(1)WF7511(1)舒特(1)国际象棋(1)HP180n(1)L3153(1)管理系统(1)条码打印软件(1)贝瓦儿歌(1)Bandicam(1)视频修复(1)彼岸特别版(1)HDD LLF(1)转印带(1)联想(23)077 900(1)废粉仓清零(1)报错er01(1)Windows10(1)理光(36)插件(1)报错PF(1)苗疆蛊事2(1)电脑(1)打印机共享(4)音标发音(1)钢铁皇朝(1)超级惊悚直播(1)会声会影(1)升级固件(1)有声小说(44)收银软件(1)4200(1)无法打印36(1)京瓷(67)向日葵(1)佛语(1)北冥有声(2)60.02(1)兄弟清零(1)M154(1)4300(1)庆余年(2)
发表评论 已有 0 评论