vue手机端自定义弹框，并设置背景不能滚动

效果图

这里我封装了一个组件，便于不同地方、不同场景调用

<template>
  <section class="wmassageMask" @touchmove.prevent>
    <div class="messageMaskContent" ref="msk">
      <div class="title">
        <h1 style="color: #fff">{{ showTitle }}</h1>
        <img src="img/txt.png" class="title_txt" />
        <img src="img/object.png" class="title_object" />
      </div>
      <slot name="content"></slot>
      <slot name="footer"></slot>
    </div>
  </section>
</template>

<script>
export default {
  props: {
    showTitle: {
      type: String,
      default: "提示",
    },
    isShowMessage: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {},
  watch: {
    isShowMessage: {
      //弹出层禁止背景页面滑动
      handler(val) {
        var mo = function (e) {
          e.preventDefault();
        };
        if (val) {
          document.body.style.overflow = "hidden";
          //document.addEventListener("touchmove", mo, false); //禁止页面滑动
        } else {
          document.body.style.overflow = ""; //出现滚动条
          //document.removeEventListener("touchmove", mo, false);
        }
      },
    },
  },
  created() {},
  mounted() {},
  methods: {},
};
</script>

<style lang="scss" scoped>
.wmassageMask {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 9999;
  .messageMaskContent {
    position: absolute;
    top: 20%;
    left: 5%;
    width: 90%;
    background-color: #fff;
    border-radius: 0.88rem;
  }
  .title {
    height: 1.8rem;
    background: #8cc5fe;
    border-radius: 0.88rem 0.88rem 0rem 0rem;
    margin-top: -0.3rem;
    .title_txt {
      height: 2rem;
      margin-top: 0.4rem;
    }
    .title_object {
      height: 2.05rem;
      position: absolute;
      top: 0.88rem;
      left: 0.5rem;
    }
  }
  div {
    text-align: center;
    padding: 0.3rem 0;
  }
  p {
    text-align: center;
    font-size: 0.4rem;
    margin: 1.5rem 1.2rem 0.5rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    //text-indent: 2em;
  }
}
/deep/ {
  .el-button--mini,
  .el-button--small {
    font-size: 0.44rem;
    border-radius: 0.59rem;
    width: 40%;
    font-family: PingFang SC;
    font-weight: 400;
  }
  .el-button--primary {
    background: #0464c6;
    border-color: #0464c6;
  }
  .el-button--primary.is-disabled {
    background: #a0cfff;
    border-color: #a0cfff;
  }
  .el-button--default {
    color: #0464c6;
    border: 1px solid #0464c6;
  }
}
</style>

取消提醒处部分代码

<show-message
  v-show="isShowMessage"
  :showTitle="'取消预约提醒'"
  :isShowMessage="isShowMessage"
>
  <p slot="content">{{ showMessage }}</p>
  <div slot="footer">
    <el-button size="small" @click="isShowMessage = false">
      <span>取消</span>
    </el-button>
    <el-button type="primary" size="small" @click="onConfirm()">
      <span>确定</span>
    </el-button>
  </div>
</show-message>

 须知提醒处部分代码

<show-message
  v-show="dialogVisible"
  :showTitle="showTitle"
  :isShowMessage="dialogVisible"
>
  <div slot="content">
    <p
      style="
        text-align: center;
        white-space: pre-line;
        max-height: 5.5rem;
        overflow: auto;
      "
    >
      <span style="text-align: left; display: inline-block">{{
        businessData.noticeContent
      }}</span>
    </p>
  </div>
  <div slot="footer">
    <el-button size="small" @click="dialogVisible = false">
      <span>否</span>
    </el-button>
    <el-button
      type="primary"
      :disabled="countDownVal > 0"
      size="small"
      @click="onConfirm"
    >
      <span>是</span>
    </el-button>
  </div>
</show-message>

倒计时处部分代码

this.countDownVal = 5;
this.timer = setInterval(() => {
  if (this.countDownVal > 0) {
    this.countDownVal--;
  } else {
    clearInterval(this.timer);
    this.timer = null;
 }
}, 1000);

 2022.3.10修改
如果上述方法还是不行，设置头部id="container"
将watch部分放在实际应用界面

watch: {
  isShowMessage: {
    //弹出层禁止背景页面滑动
    handler(val) {
      var mo = function (e) {
        e.preventDefault();
      };
      if (val) {
        document.getElementById("container").style.overflow = "hidden";
        document.getElementById("container").style.position = "fixed";
        document.addEventListener("touchmove", mo, false); //禁止页面滑动
      } else {
        document.getElementById("container").style.overflow = ""; //出现滚动条
        document.getElementById("container").style.position = "";
        document.removeEventListener("touchmove", mo, false);
      }
    },
  },
},