Vue3弹窗遮罩模板

自用留档（图标引的阿里巴巴图标库）

子组件：弹窗+遮罩

<template>
  <div class="talent-report">
    <div class="context">
      <div class="text-box">
        <!-- 关闭按钮 -->
        <i @click="boxClose" class="iconfont iconguanbi2fill"></i>

        <!-- 弹窗里的内容 -->
        <div class="box">

        </div>
      </div>
    </div>

    <div @click="boxClose" class="mark"></div>
  </div>
</template>
 
<script setup>
import { ref, defineEmits } from "vue";

const emit = defineEmits(["boxClose"]);

const boxClose = () => {
  emit("boxClose", false);
};
</script>
 
<style lang="scss" scoped>
.talent-report {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 400;
  font-size: 12px;
  color: $color;
  > .context {
    position: absolute;
    z-index: 400;
    left: calc(50% - 720px / 2);
    > .text-box {
      position: relative;
      top: calc(50vh - 500px / 2);
      // margin: 120px auto 0;
      width: 720px;
      height: 500px;
      background-color: #fff;
      > i {
        position: absolute;
        color: #aaa;
        right: -40px;
        top: -5px;
        font-size: 35px;
        cursor: pointer;
      }
      >.box{}
    }
  }
  > .mark {
    position: fixed;
    width: 100vw;
    height: 100vh;
    background-color: rgba(43, 43, 43, 0.7215686275);
  }
}
</style>

父组件使用

<!-- 个人认证弹窗 -->
    <PersonalAuthentica v-show="boxChange" @boxClose="boxClose" />





import PersonalAuthentica from "./PersonalAuthentica.vue";



// 个人认证弹窗状态
const boxChange = ref(false);
const boxClose = (e) => {
  console.log(e);
  boxChange.value = false;
};

子组件自定义高度后 锁定父元素（原整体页面）滚动

// 抽屉弹窗-关闭
const boxChange = ref(false);
const boxClose = (e) => {
  boxChange.value = false;
  let m = function (e) {
    e.preventDefault();
  };
  document.body.style.overflow = ""; //出现滚动条
  document.removeEventListener("touchmove", m, { passive: true });
};
// 抽屉弹窗-打开
const boxOpen = () => {
  boxChange.value = true;
  let m = function (e) {
    e.preventDefault();
  };
  document.body.style.overflow = "hidden";
  document.addEventListener("touchmove", m, { passive: false }); //禁止页面滑动
};

页面滚动条样式

::-webkit-scrollbar {
        //滚动条整体
        width: 1px;
        opacity: 0;
      }