功能实现：

运用原生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);
},

h5端点击复制分享链接相关推荐

微信网页开发，禁止右上角微信复制分享链接JS
禁止微信右上角分享链接开发网页时,为了提高网页链接的安全,不想让别人分享链接给别人一般微信打开网页后,点击右上角是这样的想要网页不能被复制,不能分享给其他人效果图: 资源文件下载地址下载地址 ...
html5移动端点击复制,H5实现移动端复制文字功能
前言移动端项目开发中,经常遇到需要复制文字的场景,今天咱们就来聊一下,移动端复制文字的那些事~ 效果预览背景分析业务需求很简单,将指定的文字(例如: 关键字.文案描述等)复制到手机的剪贴板上,方 ...
vue移动端点击复制文本内容
安装依赖包: npm install clipboard --save 在需要用到的vue文件导入: import Clipboard from 'clipboard'; import { Toast ...
js实现网页点击复制（可用于h5点击复制等）
var input1 = document.createElement("input"); // 直接构建inputinput1.value = "内容内容内容内容&qu ...
html 复制链接功能,h5分享功能[通过复制网页链接分享]
需求为分享网页,本意查询调用浏览器分享功能.对接新浪和QQ等方法.觉低效,遂起此方. function copy_url() { var textarea= document.createElemen ...
移动端点击a链接出现蓝色背景问题解决
移动端点击a链接出现蓝色背景问题解决参考文章: (1)移动端点击a链接出现蓝色背景问题解决 (2)https://www.cnblogs.com/lqcdsns/p/6370931.html 备忘一 ...
jquery粘贴按钮_实现前端点击按钮自动复制剪贴板功能
[目录] 明确需求 html分析代码实现 css分析 js分析代码实现只要是文本,长按选中就可以复制,但是需求来了挡也挡不住: 明确需求为了提升用户体验,点击[复制]按钮就自动复制到剪贴板,那 ...
H5网页如何在微信中自定义分享链接
1.引入js文件 <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js" type="text/ja ...
vue点击复制链接功能
需求:点击复制链接,粘贴到地址栏中跳转到相应页面原理:创建input标签,将链接值赋值给input标签,调用浏览器复制方法示例代码: <template> <div class= ...

h5端点击复制分享链接

功能实现：

运用原生js实现H5

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

一：进行组件事件，传参pcUrl

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

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

h5端点击复制分享链接相关推荐

最新文章

热门文章