技術標籤：vuejqueryvuejquerynode.js

在做專案時遇到的一個坑：一個通過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設定一個延遲器才能監聽到對應的鍵的類