如何在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将能够获得正确的地图容器尺寸。