Question

这是一个Vue.js项目，我正在使用Vuetify。我有一个导航抽屉。屏幕宽度为1263像素时，调整大小观察器将启动，并且抽屉关闭。我可以使用“永久”来防止这种情况。我想做的是代替关闭抽屉开关到mini。

这是我现有的代码。

<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

非常感谢您的帮助

Answer 1

考虑来自docs的<v-navigation-drawer mini-variant="mini">：

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

在移动设备上将vuetify导航栏切换为mini

1 个答案: