加載網站V型導航抽屜關閉

是否有可能在網站加載與抽屜式導航封閉式和開放式只需點擊後，就像一個移動的菜單嗎？加載網站V型導航抽屜關閉

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

現在，當應用程序加載它出現在大屏幕打開，在小屏幕關閉。我希望這個菜單在小屏幕和大屏幕上有相同的行爲：當用戶點擊漢堡菜單時，總是關閉並打開。

來源

2017-10-09 Fabio Zanchi

我想你需要mobile-break-point屬性：

mobile-break-point="10240"

來源

2017-10-09 11:17:26

完美的作品。謝謝！ –

另一種方法是添加stateless財產。將它與hide-overlay屬性組合在一起，以便您仍然可以在移動設備上使用抽屜。

來源

2018-01-13 02:19:23 Dari4sho

有一個辦法。你可以簡單地使用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>

來源

2018-02-23 15:37:56 Hexodus

加載網站V型導航抽屜關閉

回答

相關問題