Question

我使用vue.js和vuetify制作了用于移动设备和台式机的工具栏，并获得了此Codepen示例。当它是台式机时，它具有常规的工具栏，而对于移动设备，它具有带抽屉的工具栏侧面图标。它工作得很好，但是当我从屏幕的移动大小调整为桌面大小时，桌面工具栏会跳到右侧，如您在示例中看到的那样，我必须更新页面以使其再次正确。我该如何更改才能正确处理？我的猜测是它正以某种方式被抽屉推开？

这是Codepen上的代码： 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>

调整大小后，菜单会向左推

0 个答案: