A camada pop-up Vue mais a página da camada de máscara proíbe o deslizamento

pai e filho ligam

O componente pai define se a camada pop-up é exibida

AnimationsPopup: false

Valor do julgamento do rótulo

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

O evento click atribui true a AnimationsPopup, oculta a página da barra de rolagem e proíbe o deslizamento

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

adicionar camada de máscara

Etiqueta sob etiqueta grande

<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;
  transition: all 0.15s linear;
}

O subcomponente recebe o valor

props: {
  visible: Boolean
},

fechar pop-up

A barra de rolagem aparece no evento de clique para permitir o deslizamento

closes() {
  this.$emit('update:visible', false)
  var mo = function (e) {
    e.preventDefault()
  }
  document.body.style.overflow = '' //出现滚动条
  document.removeEventListener('touchmove', mo, false)
},

grande gravadora

<div
  :visible="visible"
  @update:visible="$emit('update:visible', $event)"
>