vue/H5点击复制动态内容（手机号）

最新推荐文章于 2024-05-30 11:27:34 发布

毛发苍苍

最新推荐文章于 2024-05-30 11:27:34 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue JS H5移动端

本文链接：https://blog.csdn.net/weixin_45629623/article/details/109540176

Vue 同时被 3 个专栏收录

56 篇文章

订阅专栏

45 篇文章

订阅专栏

H5移动端

38 篇文章

订阅专栏

本文介绍了一种使用原生JavaScript实现的复制功能，避免了使用VueClipboard等插件带来的双击复制问题。通过创建一个DOM对象并模拟用户行为完成复制操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经过踩坑，如果复制的内容是通过接口来的，不要用vue clipboard

（先说结果，用它，有bug，需要点两次才能复制好，网上有攻略是点击之前指向触发一次。但是库里会有两次调取记录，说近的你还需要上cdn搜，吃力不讨好）

重点来了，原生调用复制不香吗

（插件还要引入，多用原生，日后写H5受益）

<el-button size="mini" type="primary" @click="copy(xx)" >复制</el-button>

中间要声明copyData变量

async copy(id) {
                let res=await api_u.getphone({activityUserId:id})
                this.copyData=res
                var oInput = document.createElement('input'); 
                oInput.value = this.copyData; 
                document.body.appendChild(oInput); 
                oInput.select(); // 选择对象 
                document.execCommand("Copy"); // 执行浏览器复制命令 
                oInput.className = 'oInput'; 
                oInput.style.display='none'; 
                this.$message.success("复制成功!")
            }

为什么要创建一个dom？照做就好了… 直接复制就能成功，这个我也不懂~哈哈。有空想起来了会回来补充的。
————
创建一个dom对象(input)，把值赋给他，把新对象加进去body(dom对象里），模拟用户行为选择它，执行复制。给新对象新增一个css类，然后隐藏该dom元素（因为新增dom元素时候，页面会多这么个html的~）