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

【问题标题】：Load website with v-navigation-drawer closed在 v-navigation-drawer 关闭的情况下加载网站
【发布时间】：2018-03-20 06:48:25
【问题描述】：

是否可以在 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>

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

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

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

mobile-break-point="10240"

【讨论】：

完美运行。谢谢！
你能解释一下为什么选择“10240”吗？
@JavierCárdenas ，它是 1024 的 10 倍。任何足够大的值都可以使用。

【解决方案2】：

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

【讨论】：

【解决方案3】：

有办法。你可以简单地使用 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>

【讨论】：

【解决方案4】：

将 prop 'enable-resize-watcher' 更改为 'disable-resize-watcher' 另外，当您没有使用该道具时，请添加该道具添加此道具“禁用调整大小观察器”以禁用导航抽屉在大视口中打开

【讨论】：