v-navigation-drawerを閉じたウェブサイトをロード

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

私はあなたがmobile-break-pointプロパティが必要だと思う：

mobile-break-point="10240" 

Answer 2

もう一つの方法は、statelessプロパティを追加することです。 hide-overlayプロパティと組み合わせて、モバイルで引き出しを使用することができます。

Answer 3

方法があります。あなたは単にdrawer="false"のようなdrawer小道具を使用してそれを緩和することができます。しかし、もちろんそれを活性化する方法が必要です。以下のコードを参照してください。

<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>