vue手写遮罩层弹窗，实现点击遮罩层和关闭按钮关闭弹窗

父组件

<template>
  <section>
    <div class="ruleBtn"  @click="handleClick($event)">点击按钮</div>
    <RuleModal 
      v-if="ruleModalVisible"
      ref="ruleModal"
      :modalConfig="modalConfig"
      @close="closeRuleModal"
    />
  </section>
</template>

<script lang="ts">
import {Vue, Component, Prop, Mixins, Watch} from 'vue-property-decorator'
import RuleModal from './components/RuleModal.vue'

let bodyScrollTop = 0;
//@ts-ignore
@Component({
  components:{
    RuleModal
  }
})
export default  class extends xxx {
  @Prop({
    default: () => ({
      modalTitle: '入口规则',
    })
  })
  modalConfig!:IModalConfig;
  ruleModalVisible = false; // 规则弹窗

解决弹窗出现后，滚动鼠标遮罩层下还能滑动的问题：
方法一：比较完善

  // 监听弹窗是否出现
  get isExistModal() {
    return this.ruleModalVisible;
  }
  @Watch('isExistModal')
  // 底部弹窗出来后hack掉body的滚动，避免滚动穿透（解决弹窗出现后，滚动鼠标遮罩层下还能滑动的问题）
  hackBodyScroll(value: boolean = false) {
    if (value) {
      // 展示出新的
      bodyScrollTop =
        window.pageYOffset ||
        (document as any).documentElement.scrollTop ||
        window.scrollY ||
        0;
      document.body.style.top = `-${bodyScrollTop}px`;
      document.body.style.position = "fixed";
      document.body.style.width = "100%";
      document.body.style.height = "100%";
    } else {
      document.body.style.display = "block";
      document.body.style.position = "static";
      document.body.style.top = "0";
      (document as any).documentElement.scrollTop = bodyScrollTop;
      document.body.scrollTop = bodyScrollTop;
    }
  }

方法二：直接在开关弹窗时通过控制document.body.style.overflow的状态来实现，不过有人说移动端就有问题，我是没有遇到，视情况而定

 // 点击打开弹窗
  handleClick(this: any, event: any) {
    this.ruleModalVisible = true;
    // document.body.style.overflow = 'hidden'; // 开弹窗时将overflow = "hidden"
  }

// 关闭弹窗
  closeRuleModal(event:any) {
    this.ruleModalVisible = false;
    // document.body.style.overflow = 'visible';
  }
}
</script>

子组件：弹窗组件

<template>
  <div class="rule-modal" @click="close($event)">
   <!-- <div class="modal-wrap"> -->
      <div class="main-area" @click="stopClose($event)">
     	{{modalTitle}}
      </div>
      <!-- 关闭按钮 -->
      <img class="close-btn" src="//p0.meituan.net/scarlett/505b32dc0700840a35050bdfc9afc4b4608.png" />
    </div>
  </div>
</template>

<script lang="ts">
  import Vue from 'vue';
  export default Vue.extend({
    props:{
      modalConfig: {
        type: Object,
        default() {
          return {
            modalTitle: '活动规则',         
          }
        }
      }
    },
    methods:{
   	 // 实现点击弹窗遮罩层和关闭按钮emit关闭
      close(this: any, event: any) {
        this.$emit('close', event);
      },
      // 实现点击弹窗内容自身阻止冒泡，以防弹窗被关闭
      stopClose(e: any) {
        e.stopPropagation();
      }
    }
  })
</script>

css样式

// 关键是rule-modal的样式，其他根据项目需求写
  .rule-modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    .modal-wrap {
     width: 6.2rem;
     display: flex;
     flex-direction: column;
     align-items: center;
     background-repeat: no-repeat;
     background-size: 100%;

     height: 100%;
     justify-content: center; 
  	 .main-area{}
     // 关闭按钮
     .close-btn {
       width: 0.8rem;
       height: 0.8rem;
       margin-top: 0.4rem;
     }
    }  
   }