Как сохранить основной контент под боковой панелью при ее открытии? - PullRequest
Новая
       3

Как сохранить основной контент под боковой панелью при ее открытии?

0 голосов
/ 06 апреля 2020

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

============
app. vue: 

<template>
      <v-app>
        <Header 
          v-on:leftChange="leftChange"
        ></Header>

        <Left 
          ref="LeftMethod"
        ></Left>

        <Main/>

      </v-app>
    </template>

    <script>
      import Header from "@/components/Header.vue";
      import Footer from "@/components/Footer.vue";
      import Left from "@/components/Left.vue";
      import Main from "@/components/Main.vue";

      export default {
        components:{
          'Header' : Header,
          'Footer' : Footer,
          'Left' : Left,
          'Main' : Main
        },
        methods: {
          leftChange() {
            this.$refs.LeftMethod.changeA();
          },
        }
      }
    </script>

＝＝＝＝＝＝＝＝＝＝
Main : 

<template>
  <v-content>
    <v-container fluid fill-height>
      <div>MainContent</div>
    </v-container>
  </v-content>
</template>

========
Заголовок: 

<template>
  <v-app-bar app clipped-left>
    <v-app-bar-nav-icon @click="leftChange"></v-app-bar-nav-icon>
  </v-app-bar>
</template>

<script>
  export default {
    methods: {
      leftChange: function(){
        this.$emit('leftChange');
      },
    }
  }
</script>

=============
Слева : 

<template>
  <v-navigation-drawer 
    app
    v-model="a" 
    clipped 
    stateless
  >
  </v-navigation-drawer>
</template>

<script>
  export default {
    data(){
      return {
        a: false,
      }
    },
    methods: {
      changeA() {
        this.a = !this.a;
      },
    }
  }
</script>

1 Ответ

0 голосов
/ 06 апреля 2020

Предполагается, что размер v-контента изменяется в зависимости от размера навигационных ящиков и других компонентов приложения со свойством app.

Если вы этого не хотите, дона не используйте реквизит "приложение". Вместо этого, в зависимости от желаемого эффекта, вам, возможно, придется самостоятельно расположить навигационную панель (боковую панель). Вы можете легко сделать это, добавив реквизиты, такие как «абсолютный» или «временный», или поместив ящик в компонент контейнера, такой как v-menu. Вы можете использовать примеры, предоставленные Vuetify в качестве примера.

...