防止 vue2-leaflet 地图将自身叠加在 Vuetify 的导航抽屉之上

Question

我正在使用 Vuetify 构建一个显示本地兴趣点的应用程序。该应用程序使用 vue2-leaflet 来显示地图。不幸的是，地图从导航抽屉、对话框和较暗的屏幕覆盖层中弹出。以下是展示它的图片：

我该如何解决？

Answer 1

这是一个 z-index 问题。尝试将以下内容添加到您的 CSS:

.v-navigation-drawer--temporary {
    z-index: 1001;
}

你可以see a working example on Codepen。我认为这是最小的 z-index 值，可以让你得到你想要的叠加层，但你可能需要尝试一下，直到你得到正确的值。

注意：此解决方案仅适用于导航抽屉。对于对话框等其他类型的组件，您可能需要单独调整自定义 CSS 中的 z-index 值。或者，您可以找到传单 CSS 中设置 z-index 的位置，然后对其进行修改。我对 Vuetify 更熟悉，所以这就是我调整的内容。

Answer 2

在我看来，如果需要更改 z-index：最好修改地图本身 - 而不是 Vuetify 的 css，后者会影响应用程序中的其他组件。

在注册传单地图的组件中添加

<style lang="scss">
  .vue2leaflet-map {
    z-index: 1;
  }
</style>

这对我使用 Vuetify + Vue2-leaflet（今天的最新日期）很有用。到目前为止还没有注意到其他 Vuetify 组件有任何问题。

Preventing vue2-leaflet map from overlaying itself on top of Vuetify's navigation drawer