javascript - 在 v-navigation-drawer 关闭的情况下加载网站

Question

是否可以在关闭 Navigation Drawer 的情况下加载网站并在点击后立即打开，就像移动菜单一样？

我正在使用 Vuetify:

<template>
  <v-app toolbar--fixed toolbar footer>
    <v-navigation-drawer
    temporary
    v-model="sideNav"
    enable-resize-watcher
    disable-route-watcher
    right
    dark
    absolute>
      <v-list dense>
        <v-list-tile
          v-for="item in menuItems"
          :key="item.title"
          router
          :to="item.link">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content class="sidemenu-item">{{ item.title }}</v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar dark class="blue-grey darken-4">
      <v-toolbar-title>
        <router-link to="/" tag="span" style="cursor: pointer">
          <img class="logo" src="static/images/main_logo.png" alt="">
        </router-link>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-side-icon
        @click.stop="sideNav = !sideNav"></v-toolbar-side-icon>
    </v-toolbar>
    <main>
      <router-view></router-view>
    </main>
    <v-footer class="blue-grey darken-4 main-footer">
      <span class="white--text main-footer">© {{ new Date().getFullYear() }}</span>
    </v-footer>
  </v-app>
</template>

<script>
  export default {
    data () {
      return {
        sideNav: true,
        menuItems: [
          { icon: 'home', title: 'Home', link: '/' },
          { icon: 'fast_forward', title: 'Sign Up', link: '/signup' },
          { icon: 'business', title: 'About', link: '/About' },
          { icon: 'mail', title: 'Contact', link: '/contact' }
        ]
      }
    }
  }
</script>

现在，当应用程序加载时，它在大屏幕上显示为打开，在小屏幕上显示为关闭。我希望此菜单在小屏幕和大屏幕上具有相同的行为:始终在用户单击汉堡菜单时关闭和打开。

Answer 1

有办法。您可以简单地使用 drawer Prop ，例如 drawer="false" 来禁用它。但是当然你需要一种激活它的方法。请参阅下面的代码。

<template>
  <v-app>
    <v-navigation-drawer v-model="drawer" fixed app >
    ...
    </v-navigation-drawer>

    <v-toolbar fixed app :clipped-left="clipped"  dark color="primary">
          <v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>
    </v-toolbar>      
  </v-app>
</template>

<script>
  export default {
    data () {
      return {
        drawer: false
      }
    }
  }
</script>