Как установить Vuetify Navigation Drawer поверх всех остальных компонентов приложения

Question

Я хотел бы знать, как я мог бы сделать это.

С некоторыми компонентами он выглядит сверху, но затем другие компоненты, такие как компонент Leaflet (Map), перекрывают мой SideDrawer, так что Я не могу использовать его должным образом.

Как я могу установить, чтобы мой навигационный ящик всегда был сверху с более высоким z-индексом, чем у других компонентов?

Answer 1

1. откройте ваш root компонент App.vue
2. , убедитесь, что у вашего тега стиля нет атрибута scoped, поэтому CSS может применяться глобально
3. и добавьте следующее CSS

.v-navigation-drawer {
z-index: 999999 !important;
}

Answer 2

У меня была очень похожая проблема с компонентом v-calendar. Ящик навигации работал для любой другой страницы, кроме страницы с v-calendar.

. Оказывается, я неправильно использовал элементы v-app, v-content и v-container. Не могли бы вы поделиться своим App.vue контентом, чтобы мы могли это проверить?

Я полагаю, вам следует искать эту структуру, а не работать над css трюками (не то, что мы не можем, но при работе с компонентами мы не должны были так сильно изменять)

Например, в моем приложении это работает сейчас, и у меня есть следующая структура:

<template>
  <v-app>
    <v-navigation-drawer ... />
    <v-content>
      <v-container>
        <router-view />
      </v-container>
    </v-content>
  </v-app>
</template>

И view с календарем более или менее похож на:

<template>
  <v-row>
    <v-col>
      <v-sheet>
        <v-calendar />
      </v-sheet>
    </v-col>
  </v-row>
</template>

Надеюсь, это поможет!