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

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