如何在vue js中使invalidateSize單張地圖映射？

Question

我正在使用vue-nav-tabs插件，並使用@tab-change="handleTabChange"事件來更改標簽。

我在父組件中使用標簽

methods: {
    handleTabChange() {
        this.$refs.map.invalidateSize();
    }
}

這是Map（子組件）

methods: {
     invalidateSize() {
                this.map.invalidateSize(true);
                console.log(true)
     }
}

此invalidateSize方法成功運行，但不會重新呈現地圖。

我該怎么辦？

Answer 1

Vue-tabs插件的tab-change事件與執行標簽導航的實際操作同步發出。 因此，很可能在事件觸發時新標簽還沒有出現。

在事件之后使用短暫的超時應該給該標簽顯示一些時間，然后invalidateSize將能夠獲得正確的地圖容器尺寸。