меню сдвигается влево после изменения размера - PullRequest
Новая
       38

меню сдвигается влево после изменения размера

0 голосов
/ 21 февраля 2019

Я создаю панель инструментов для мобильных и настольных систем с vue.js и vuetify, и получил этот пример кода.У него обычная панель инструментов, когда она на рабочем столе, и боковая иконка на панели инструментов с выдвижным ящиком, когда она для мобильного телефона.Это работает довольно хорошо, но когда я изменяю размер экрана с экрана мобильного устройства на рабочий стол, панель инструментов рабочего стола переходит вправо, как вы можете видеть в примере, и мне приходится обновлять страницу, чтобы снова ее исправить.Что я могу изменить, чтобы сделать это правильно?Я предполагаю, что он каким-то образом толкает ящик?

вот код на коде ручки: https://codepen.io/haangglide/pen/ErzmKJ

HTML 

<div id="app">
<nav>
  <v-toolbar class="hidden-sm-and-down" flat app>
    <v-toolbar-items>
      <v-btn flat to="/" exact>Home</v-btn>
      <v-btn flat to="/about" exact>About</v-btn>
    </v-toolbar-items>
    <v-spacer></v-spacer>

    <v-toolbar-title class="text-uppercase grey--text">
      <span class="font-weight-light">Test</span>
    </v-toolbar-title>
  </v-toolbar>


  <nav class="hidden-md-and-up" flat app>
    <v-toolbar>
      <v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>
      <v-spacer></v-spacer>
      <v-toolbar-title class="text-uppercase grey--text">
        <span class="font-weight-light">Test</span>
      </v-toolbar-title>
    </v-toolbar>

    <v-navigation-drawer app v-model="drawer" class="primary">
      <p>test</p>
      <v-toolbar-items>
        <v-btn flat to="/" exact>Home</v-btn>
        <v-btn flat to="/about" exact>About</v-btn>
      </v-toolbar-items>
    </v-navigation-drawer>
  </nav>
</nav>

<v-content>
  <v-container fluid fill-height>
    <v-layout justify-center align-center>
      <v-flex shrink>HEJ
        <router-view/>
      </v-flex>
    </v-layout>
  </v-container>
</v-content>

JS: 

new Vue({
el: '#app',
data() {
return {
  drawer: false
 };
}
})

РЕДАКТИРОВАТЬ: Удаление приложения из ящика и редактировать код ящика, чтобы решить проблему: 

      <v-navigation-drawer v-model="drawer" temporary absolute width="200" class="primary">
    <p>test</p>
    <v-toolbar-items>
      <v-btn flat to="/" exact>Home</v-btn>
      <v-btn flat to="/about" exact>About</v-btn>
    </v-toolbar-items>
  </v-navigation-drawer>
...