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