v-navigation-drawer가 닫힌 상태로 웹 사이트 로드

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

이제 응용 프로그램이 로드되면 큰 화면에 열리고 작은 화면에 닫힙니다.이 메뉴는 작은 화면과 큰 화면에서도 같은 동작을 하고 싶습니다.사용자가 햄버거 메뉴를 클릭할 때 항상 닫히고 열립니다.

방법이 있다.간단하게 사용할 수 있습니다.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>

또 다른 방법은,stateless소유물.그것을 와 조합하다hide-overlay모바일에서도 드로어를 사용할 수 있습니다.

모바일 브레이크 포인트 속성이 필요하다고 생각합니다.

mobile-break-point="10240"

'enable-resize-watcher'를 'disable-resize-watcher'로 변경합니다. 또한 이 소품을 사용하지 않은 경우 이 소품 'disable-resize-watcher'를 추가하여 내비게이션 드로어가 대형 뷰포트에서 열리지 않도록 합니다.

언급URL : https://stackoverflow.com/questions/46640019/load-website-with-v-navigation-drawer-closed