모바일 장치에서 네비게이션 바를 mini로 전환

모바일 장치에서 네비게이션 바를 mini로 전환

이것은 Vue.js 프로젝트로 Vuetify를 사용하고 있습니다.내비게이션 서랍이 있어요.화면 폭 1263px에서 크기 조정 워처가 시작되고 드로어가 닫힙니다.'영구적'으로 예방할 수 있습니다.제가 원하는 것은 서랍 스위치를 미니로 닫지 않고 하는 것입니다.

여기 제 기존 코드가 있습니다.

<v-navigation-drawer 
    clipped 
    :mini-variant="mini"
    v-model="drawer"
    permanent
    app
    hide-overlay
>
    <v-list dense>

        <v-list-tile
        v-for="(item, index) in authorized"
        :key="index"
        @click="sendComponent(item)"
        >

        <v-list-tile-action>
            <v-tooltip right slot="activator">
                <v-icon slot="activator">{{ item.icon }}</v-icon>
                <span>{{ item.title }}</span>
            </v-tooltip>
        </v-list-tile-action>

        <v-list-tile-content>
            <v-list-tile-title>{{ item.title }}</v-list-tile-title>
        </v-list-tile-content>

        </v-list-tile>
    </v-list>
</v-navigation-drawer>

https://codepen.io/jsd219/pen/gJJMPQ

아무쪼록 잘 부탁드립니다.

고객님의<v-navigation-drawer mini-variant="mini">, docs:

computed: {
  mini() {
    switch (this.$vuetify.breakpoint.name) {
      case 'xs': return true
      case 'sm': return true
      case 'md': return true
      case 'lg': return false
      case 'xl': return false
  }
}

의 완전한 구조를 가지고 있는 것에 주의해 주세요.$vuetify.breakpoint오브젝트를 지정합니다.
대부분의 경우 위의 상세 구문(대부분 미래의 사용자를 위해 게시되며 다양한 사용 사례)을 다음과 같이 대체해야 합니다.

computed: {
  mini() {
    return this.$vuetify.breakpoint.mdAndDown;
  }
}

언급URL : https://stackoverflow.com/questions/56467076/switch-vuetify-navigation-bar-to-mini-on-mobile-devices