Leaflet + Vue + Vuetify /传单地图隐藏vuetify弹出对话框

Question

在我的Vuetify + Lealflet项目中，地图隐藏了所有弹出对话框，我不知道为什么。我使用Vue2Leaflet库。我是Web开发的初学者。这是问题的照片：

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

Answer 1

问题是z索引范围发生冲突。 Vuetify使用z-index范围0-10，而传单使用100-1100范围。幸运的是，子元素的z-index相对于其父元素的z-index。

我建议您像这样给l-map的z索引赋予0。

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

这将自动使您的组件与所有Vuetify z索引保持一致。相反，@ bgsuello解决方法要求您修改可能与地图冲突的每个Vuetify组件的z-index，包括其他对话框，菜单，动画，选项卡，工具栏，小吃栏...

Answer 2

我觉得像这样将地图包裹在图像中非常实用

<v-img
  height="100%"
  width="100%">
    <l-map>
    ... 
    </l-map>
</v-img>

这样，无需对z-index做任何操作。

Answer 3

增加对话框的z-index样式属性。

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