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-index设置为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

编辑：这是一个过时的答案。

请参阅下面@Javier 的回答，正如@ondrejsv 在评论中指出的那样。

至少在Vuetify 2.1.9和中它不再起作用了Vue 2.6.x。哈维尔的解决方案似乎有效。

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

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