Блок шагов и вкладок Buefy Leaflet map

У меня проблема с загрузкой карты Leaflet с использованием шаговых компонентов 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.

Спасибо


buefy leaflet bulma
person Hvitis    schedule 08.08.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в том, что при рендеринге карты Leaflet она не знает размера своего окна просмотра (поскольку она не отображается в DOM).

Тем не менее, он визуализируется Vue, поскольку компонент Buefy Steps использует v-show для отображения / скрытия каждого шага вместо v-if.

Чтобы исправить это, я применил несколько хитроумное решение, при котором я слежу за изменениями на активной вкладке, а затем делаю недействительной карту Leaflet.

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

<script>
export default {
...
watch: {
  activeStep() {
    if (this.map) {
      this.$nextTick(() => {
        this.map.invalidateSize();
      });
    }
  }
}
</script>
person Nikolaj Dam Larsen    schedule 31.08.2020