vue实现微信分享遮罩层禁止点击禁止滚动

vue实现遮罩层禁止点击禁止滚动
先看效果图

直接上代码
html

 遮罩层<div class="mask" @touchmove.prevent @click="mask=false"  v-if="mask == true">//点击自身是关闭<div class="maskImg"><img src="../../static/fxhy.png" alt /></div></div><div @click="mask=false">点击打开遮罩层</div>

css

.mask {position: fixed;width: 100%;height: 100vh;top: 0;left: 0;z-index: 10000;background: rgba(0, 0, 0, 0.75);box-shadow: 0 4px 10px 0 rgba(51, 51, 51, 0.2);
}
.maskImg {position: fixed;top: 0;right: 40upx;z-index: 100000;width: 507upx;
}
.maskImg img {width: 100%;
}

data() {return {mask: false, //分享遮罩层 设置默认为关闭};},

@touchmove.prevent就可以帮我们实现禁止点击
给body设置overflow: hidden; 就可以实现禁止滚动啦。

<div class="mask" @touchmove.prevent v-if="mask==true" @click="mask=false">

修改body样式用vue 的watch监听方法，用原声js的选择器来选择标签

  watch: {mask: function (newVal) {if (newVal) {document.querySelector("body").style.overflow = "hidden";}if (!newVal) {document.querySelector("body").style.overflow = "visible";}},},

这是一个自己随手写的比较简单的，大家有更好的意见欢迎提出。

vue实现微信分享遮罩层禁止点击禁止滚动相关推荐

Vue实现微信分享好友，分享朋友圈。
实现微信分享功能. 1 .基于vue去实现在微信里去分享给你的微信好友,或者去分享到你的朋友圈里.如果是react 等等一样用法. 2.目前实现微信分享功能是通过点击微信控件触发的,代码拿走直接用, ...
vue 调用微信分享接口分享截图图片
vue 调用微信分享接口分享截图图片现在好多应用都需要分享图片等等的需求 . 大体需要这几个步骤获取分享图片将 ...
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内使用scroll-view实现滚动内容（包括图片）
微信小程序原生开发实现弹窗遮罩层并且在遮罩层内可以滚动内容(包括图片) 效果图这里的遮罩层内容由两张图片构成底图+内部内容实现代码 wxml 使用云开发的存储,自己开发的时候换掉src即可 ...
vue中微信分享的踩坑之旅
最近基于vue做一个h5的项目,里面涉及到微信分享,当时心里想着,这微信分享不是分分钟的事嘛,而且自己年初还做个一个项目,也实现了微信自定义分享,代码都是现成的,妥妥的放心. 上周二上午花了1个小时, ...
vue中微信分享总结
在最近的项目中做了微信的分享功能,遇见了一些问题,总结一下方便以后参考查阅(这个项目中运用了TS). 引入sdk npm install weixin-js-sdk --save-dev 通过requ ...
微信小程序 - 解决自定义添加遮罩层，底部页面仍滚动
前言底部的页面有滚动条,在自定义组件创建遮罩层时,底部页面仍然会滑动解决方法: 为了防止事件冒泡,在遮罩层容器内设置 // 小程序 catchtouchmove="true" ...
添加遮罩层，实现点击穿透，实现遮罩层按钮点击，遮罩层下层点击事件
给绝对定位的层多加一个样式:" pointer-events:none; " 这样绝对定位层下的元素就可以点击了如果在绝对定位层上存在能够点击的元素,在添加" poin ...
iOS自定义相机：带拍摄区域边框、半透明遮罩层、点击屏幕对焦、自动裁剪（含demo源码）
文章目录前言 I.案例1:加一个长方形的框框并裁剪身份证照片(无半透明遮罩层) 1.1 demo 源码 1.2 控制屏幕旋转方向 1.3 封装富文本API 1.4 设置相机预览层和证件框框的fram ...
vue项目微信分享之后路由链接被破坏怎么办
异常现象: 多页面应用,路由采用hash模式,链接带有"#". 在微信中分享到朋友圈或好友时,分享出去的路由被破坏,打开分享的链接,路由中的"#"会被去掉并追加 ...

vue实现微信分享遮罩层禁止点击禁止滚动

vue实现微信分享遮罩层禁止点击禁止滚动相关推荐

最新文章

热门文章