移动端mint-ui模态框遇到的问题

ps: 开发模式是cdn开发方式

1.模态框滑动后面页面跟着滑动

百度到的一个方法 刚开始不太会用

html

<!-- 侧边弹框 -->
        <mt-popup v-model="popupVisible" class='popupOne' position="right" lockScroll="false">
            <div class="btn">
                内容
            </div>
        </mt-popup>

JS

//弹出框禁止滑动
            noScroll: function () {
                varmo = function (e) {
                    e.preventDefault()
                }
                document.body.style.overflow = 'hidden'
                document.addEventListener('touchmove', mo, false) //禁止页面滑动
            },
            //弹出框可以滑动
            canScroll: function () {
                varmo = function (e) {
                    e.preventDefault()
                }
                document.body.style.overflow = '' //出现滚动条

                document.removeEventListener('touchmove', mo, false)
            },

监听事件

watch: {
            popupVisible(){
                if (this.popupVisible){
                    this.noScroll()
                }else{
                    this.canScroll()
                }
            }
        }

这时候滑动起作用了 可能会报错 只需要加一个样式就可以了

// 使用全局样式样式去掉
* { touch-action: pan-y; }