父子调用

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

AnimationsPopup: false

标签判断 传值

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

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

open() {this.AnimationsPopup = truevar 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;transition: all 0.15s linear;}

子组件接收值

props: {visible: Boolean},

关闭弹出层

点击事件 出现滚动条 开启滑动

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

大标签

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