vue 在弹框中滑动会透传到下面的页面解决办法

VUE中，在一个页面打开弹框，在弹框中上下滑动，下方页面会跟着滑动。

解决办法有2种，第2种方法比较简单

方法一：

在main.js中加入代码：

//弹出框禁止滑动
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)
}

在打开弹框的地方调用

    //禁止下层页面滑动
      this.noScroll()

关闭弹框时，调用：

this.canScroll()

完整代码：

在弹框之前，禁止页面滑动：

      //禁止下层页面滑动
      this.noScroll()
      this.$refs.listDialog.show(this.showList, '能量列表', {
        type: 'alert',
        // confirmText: 'OK',
        cancelText: '取消',
        titleText: '',
        data: null
      })

在弹框页面，关闭弹框的方法前调用：

            clickFun () {
                // this.$emit('userBehavior', type, this.outerData)
                this.canScroll()
                this.hidden()
            },

方法二：

直接在遮罩层所在的div或者弹框页面的最外层div加上“ @touchmove.prevent ” 即可

<div @touchmove.prevent>这是遮罩层的div</div>

或

<template>
    <transition name="confirm-fade">
        <div v-if="isShowConfirm" class="my-confirm" @click.stop="clickFun('clickCancel')" @touchmove.prevent>
            <div class="confirm-content-wrap" @click.stop>
                <img src="../assets/close.png" style="width:32px; height:32px;float: right;margin-top: 10px; margin-right: 10px" @click="clickFun()"/>
                <h4 class="my-confirm-title" v-show="titleText != ''">{{ titleText }}</h4>
                <div style="margin: 0px 15px 15px 20px;text-align: left">
                    每天动动手指，完成指定任务，即可参与收能量活动，限时低价购好物，我们会不定期更新福利商品，赶紧加入进来吧！
                </div>
                <button class="btnTask" style="margin-bottom: 20px" @click="jumpTask">去做任务</button>
                <div style="margin: 0px 15px 15px 20px;text-align: left">
                    每日更有免费抽奖等你来玩，泡沫洗手机,感应小夜灯，毛巾礼盒……好物多多，惊喜不断！快来试试你的运气吧！
                </div>
                <button class="btnTask" style="margin-bottom: 30px" @click="jumpLottery">立即抽奖</button>
            </div>
        </div>
    </transition>
</template>