Leaflet + Vue + Vuetify / Leaflet map скрыть всплывающее диалоговое окно vuetify

Question

В моем проекте Vuetify + Lealflet карта скрывает все всплывающие диалоги, и я не знаю почему.Я использую библиотеку Vue2Leaflet.Я новичок в веб-разработке.Вот картинка проблемы:

               <l-map
                                :center="center"
                                :zoom="zoom"
                                @click.right="mapRclicked"
                                ref="map"
                                style="height: 50vh; width: 50vh"
                >

Answer 1

Проблема в столкновении диапазонов z-index.Vuetify использует диапазоны z-index 0-10, в то время как листовка использует диапазон 100-1100.К счастью, z-индекс дочернего элемента относительно z-индекса их родителя.

Я советую вам дать l-map z-индексу 0, как это.

<l-map
  :center="center"
  :zoom="zoom"
  @click.right="mapRclicked"
  ref="map"
  style="z-index: 0; height: 50vh; width: 50vh"
>

Это автоматически приведёт ваш компонент в соответствие со всеми z-индексами Vuetify.Напротив, обходной путь @bgsuello требует, чтобы вы изменили z-индекс каждого компонента Vuetify, который может конфликтовать с картой, включая другие диалоги, меню, анимацию, вкладки, панели инструментов, панели закусок ...

Answer 2

Увеличьте свойство стиля z-index вашего диалога.

<v-dialog style="z-index:9999;"
... rest of your code ...