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%;}

js

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";}},},

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