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

Question

这是一个 Vue.js 项目，我正在使用 Vuetify。我有一个导航抽屉。当屏幕宽度为 1263px 时，resize-watcher 启动并关闭抽屉。我可以使用“永久”来防止这种情况。我希望它做的是，而不是将抽屉开关关闭到 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

考虑到你的<v-navigation-drawer mini-variant="mini">, from 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;
  }
}