Question

是否可以在点击后关闭并打开导航抽屉来加载网站，就像移动菜单一样？

我正在使用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

另一种方法是添加stateless属性。将它与hide-overlay属性结合使用，这样您仍然可以在移动设备上使用抽屉。

Answer 2

有一种方法。你可以简单地使用像drawer这样的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>

Answer 3

我认为你需要mobile-break-point属性：

mobile-break-point="10240"

Answer 4

将道具“ enable-resize-watcher”更改为“ disable-resize-watcher” 另外，当您不使用该道具时，请添加道具“ disable-resize-watcher”，以禁止导航抽屉在大视口中打开

加载v-navigation-drawer关闭的网站

4 个答案: