时间戳

首页 > 解决方案 > Buefy 步骤和标签阻止传单地图

leaflet - Buefy 步骤和标签阻止传单地图

问题描述

我在使用 Vue.js 和 Bulma 步进器组件（通过 Buefy）加载传单地图时遇到问题。

如果地图放置在步进器内，则在调整浏览器窗口大小之前它不会加载所有图块。

如果地图放置在 Bulma 步进器组件之外，那么它会毫无问题地加载。

如何让这个工作？

问题示例：https ://codepen.io/alxxnder/pen/zyYxwd

没有问题的示例：https ://codepen.io/alxxnder/pen/LMYEjr

 <b-steps>
        <b-step-item label="Account" icon="account-key">
                        <LMap
                            style="height: 350px"
                            :zoom="zoom"
                            :center="center"
                            @click="adjustMarker"
                        >
                            <LTileLayer :url="url"></LTileLayer>
                            <LCircleMarker
                                :lat-lng="circle.center"
                                :radius="circle.radius"
                                :color="circle.color"
                            />
                        </LMap>
             </b-step-item>
        <b-step-item label="Profile" icon="account"></b-step-item> 
    </b-steps>

如果我在选项卡 1 或选项卡 2 中加载地图，则没有区别。

谢谢

标签： leafletbulmabuefy

解决方案

问题是当 Leaflet 地图被渲染时，它不知道其“视口”的大小（因为它在 DOM 中不可见）。

不过它确实由 Vue 渲染，因为 Buefy 的 Steps 组件用于v-show显示/隐藏每个步骤，而不是v-if.

为了解决这个问题，我应用了一个有点老套的解决方案，我观察活动选项卡的更改，然后使传单地图无效。

<template>
  <b-steps v-model="activeStep">
    ...
  </b-steps>
</template>

<script>
export default {
...
watch: {
  activeStep() {
    if (this.map) {
      this.$nextTick(() => {
        this.map.invalidateSize();
      });
    }
  }
}
</script>

推荐阅读