100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > h5端点击复制分享链接

h5端点击复制分享链接

时间:2019-05-24 17:14:15

相关推荐

h5端点击复制分享链接

功能实现:

运用原生js实现H5

网页点击复制来分享链接功能

一:进行组件事件,传参pcUrl

<view class="share" @click="handleShare(pcUrl)"><button class="btns" data-name="shareBtn" open-type="share"><view class="image-text"><view class="image"><image src="../../static/image/share.png" mode=""></image></view><view class="text"><text>分享</text></view></view></button></view>

二:通过window.location.href来获取当前页面的url

data(){return{pcUrl:"",}}created(){this.pcUrl = window.location.href;}

三:通过原生js来模拟创建输入框进行复制

handleShare(item) {console.log("点击分享");// 创建模拟 输入框var cInput = document.createElement("input");cInput.value = item;document.body.appendChild(cInput);cInput.select(); // 选取文本框内容// 执行浏览器复制命令// 复制命令会将当前选中的内容复制到剪切板中(这里就是创建的input标签)// Input要在正常的编辑状态下原生复制方法才会生效document.execCommand("copy");// 复制成功后再将构造的标签 移除document.body.removeChild(cInput);},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。