Панель инструментов Vuetify скрыта навигационной панелью - PullRequest
Новая
       18

Панель инструментов Vuetify скрыта навигационной панелью

0 голосов
/ 02 июля 2019

Мне бы хотелось, чтобы макет приложения имел фиксированную панель инструментов вверху и левую панель навигации внизу. Кроме того, навигационный ящик должен вести себя как «временный», то есть пользователь может щелкнуть вне ящика, чтобы закрыть его.

Я могу получить нужный визуальный эффект с помощью временного ящика, но он не реагирует на щелчки мыши снаружи. Когда он помечен как временный, он ведет себя правильно, но визуально отображается поверх панели инструментов.

Как я могу убедиться, что навигационная панель всегда отображается под панелью инструментов и не закрывает ее, И закрывается, когда пользователь щелкает снаружи?

См. этот пример кода 

  <div id="app">
    <v-app id="inspire" >
      <v-navigation-drawer clipped app :temporary="temporary" v-model="drawer" hide-overlay>
      <v-list dense>
        <v-list-tile>I must respect the Toolbar and appear below</v-list-tile>
        <v-list-tile>Home 1</v-list-tile>
        <v-list-tile>Home 2</v-list-tile>
        <v-list-tile>Home 3</v-list-tile>
        <v-list-tile>Home 4</v-list-tile>
      </v-list>
    </v-navigation-drawer>

    <v-toolbar color="blue darken-3" dark app clipped-left>
      <v-btn @click="drawer = !drawer">Show drawer</v-btn>
      <v-toolbar-title>Toolbar should be always on top!</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-switch v-model="temporary" label="Make drawer temporary" hide-details/>
    </v-toolbar>

    <v-content>
      <v-container fluid fill-height>
        nothing to see here
      </v-container>
    </v-content>

  </v-app>
</div>

JavaScript: 

  new Vue({
    el: "#app",
    data: () => ({
      drawer: false,
      temporary: false
    })
  });

1 Ответ

1 голос
/ 02 июля 2019

Хорошо, похоже, вы испытываете ожидаемое поведение, поэтому это не проблема для Vuetify, однако вы можете достичь того, что описываете, добавив свой собственный оверлей.

просто добавьте свой собственный оверлейэто отображается только при наличии ящика, придайте ему соответствующий стиль для заполнения страницы и правильный z-index для размещения между страницей и ящиком.Затем просто примените @click, чтобы установить ящик в false. 

<div v-if="drawer" class="custom_overlay" @click="drawer = !drawer"></div>

.custom_overlay {
    position: fixed;
    height: 100vh;
    width: 100%;
    background: rgba(50,50,50,0.5);
    z-index:2;
}

См. Пример здесь: https://codepen.io/anon/pen/YoLwgv

...