h5 vue解决弹窗滑动穿透问题

1.在mian.js中引入prototype.js

import Vue from 'vue';
//弹出框禁止滑动
Vue.prototype.noScroll = function () {
    var mo = function (e) { e.preventDefault() }
    document.body.style.overflow = 'hidden'
    document.addEventListener('touchmove', mo, false)// 禁止页面滑动
}

//弹出框可以滑动
Vue.prototype.canScroll = function () {
    var mo = function (e) {
        e.preventDefault()
    }
    document.body.style.overflow = ''// 出现滚动条
    document.removeEventListener('touchmove', mo, false)
}

2.弹窗页面观测弹窗展示隐藏

watch: {
        value(newVal, oldVal) {
            if (newVal) {
                this.noScroll();
            } else {
                this.canScroll();
            }
        },
    },