记录vue---vant自定义遮罩层van-overlay

最近在开发一个弹窗，使用的时vant组件库中的van-overlay组件，内容区可自行编译,具体样式如下：

遇到的坑

1、滚动区域无法滚动，overflow失效

解决办法：官网的坑

背景给默认锁定，无论怎么修改都不会动，所以设置下为false就可以滑动了

2、设置完lock-scroll为false,当滚动滑倒最后时，遮罩层下的内容，就会跟着滚动

解决办法：

1、封装一个函数 新建utils/modalHelper.js文件

// 解决遮罩层滚动穿透问题，分别在遮罩层弹出后和关闭前调用
let _scrollTop = 0;
class ModalHelper {
  // popup 显示时调用
  static afterOpen() {
    _scrollTop = document.scrollingElement.scrollTop;
    document.body.style.position = "fixed";
    // 设置完fixed，页面会变宽，需要控制下
    document.body.style.width = 100 + "vw";
    document.body.style.top = -_scrollTop + "px";
  }
  // popup 关闭时调用
  static beforeClose() {
    document.body.style.position = "";
    document.body.style.top = 0;
    // 使 scrollTop 恢复原状
    document.scrollingElement.scrollTop = _scrollTop;
  }
}

export default ModalHelper;

2、全局引入

import ModalHelper from './utils/modalHelper'
Vue.prototype.$modalHelper = ModalHelper

3、在页面中使用，监听是否弹出

 watch: {
    show(val) {
      if (val) {
        this.$modalHelper.afterOpen(); // 打开禁用
      } else {
        this.$modalHelper.beforeClose(); // 关闭禁用
      }
    }
  }

具体代码

  <van-overlay :lock-scroll="false" class="showRule" :show="show" v-if="show"@click="show = false">
    <div class="showRuleCon">
    //活动规则图片
      <div class="logo"></div>
       //活动内容滚动区域
      <div class="showRulebox">
        <div id="showRuleText"></div>
      </div>
      //❌号
      <van-image  @click="show = false" class="con_imgerror":src="图片"/>
    </div>
  </van-overlay>
  
<style scoped>
.showRule {
  display: flex;
  justify-content: center;
  align-items: center;
}
.showRuleCon {
  width: 260px;
  background-color: #fdf8db;
  height: 300px;
  border-radius: 5px;
  position: relative;
  margin-bottom: 100px;
}
.showRulebox {
  height: 250px;
  padding: 0 15px;
  /* overflow: hidden; */
}
#showRuleText {
  height: 250px;
  overflow-y: scroll;
}
.con_imgerror {
  position: absolute;
  bottom: -50px;
  width: 30px;
  right: 115px;
}
</style>