vue 弹出层 加遮罩层 页面禁止滑动

父子调用

父组件定义弹出层是否展示

AnimationsPopup: false

标签判断 传值

<BoxShowPopup
        v-show="AnimationsPopup"
        :visible.sync="AnimationsPopup"
      />

点击事件 给AnimationsPopup赋值为true 隐藏滚动条 页面禁止滑动

open() {
  this.AnimationsPopup = true
  var mo = function (e) {
    e.preventDefault()
  }
  document.body.style.overflow = 'hidden'
  document.addEventListener('touchmove', mo, false) //禁止页面滑动
},

加遮罩层

大标签下加标签

<div :class="[{ introduced: AnimationsPopup }]"></div>

scss

.introduced {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.9);
  z-index: 90;
  tra