vue弹出模态框时禁止滚动、关闭时恢复滚动（针对npm下载的插件）

在做项目时遇到的一个坑：一个通过npm下载的vue插件，原有的滚动功能在我的vue中无效，最后想到了一种解决方案：

当弹出模态框时禁止滚动

1、添加点击事件与方法

我用的插件正好支持在标签内套标签加插槽，直接用@click

methods:{
    stop(){
        this.scrollTop = document.scrollingElement.scrollTop;
        document.body.classList.add('modalOpen');
        document.body.style.top = `-${this.scrollTop}px`;
    }    
}

2、添加禁用css

用于禁用滚动，必须在./public/index.html里引入，否则stop()方法会找不到

.modalOpen {
    -webkit-overflow-scrolling:touch;
    position: fixed;
    width: 100%;
}

当关闭模态框时开启滚动

通过观察，点击"x"图标或'取消'键会关闭模态框，但不会开启滚动，而且跳转到其他页面时也不会开启，原因是我们没有移除modalOpen类

但问题来了，因为是模态框是弹出来后才有标签，因为是下载的插件所以不能在封装前写时间和方法，对此我想到了一个办法——在stop()方法里添加jquery监听事件

stop(){
    ...
    setTimeout(function () {
        var a = document.querySelectorAll('.btn-default')
        $('.btn-default').on('click', function() {
            $('body').removeClass("modalOpen");
        });
        $('.closeIcon').on('click', function() {
            $('body').removeClass("modalOpen");
        });
    },100);
}

注：给jquery设置一个延迟器才能监听到对应的键的类