在移动设备上将 vuetify 导航栏切换为 mini [英] switch vuetify navigation bar to mini on mobile devices

问题描述

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

This is a Vue.js project and I am using Vuetify. I have a navigation drawer. At 1263px screen width the resize-watcher kicks in and the drawer closes. I can prevent this using 'permanent'. What I would like it to do is instead of closing the drawer switch to 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

非常感谢任何帮助

推荐答案

考虑你的 ，来自 文档:

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 对象的完整结构.
最有可能的是，您需要将上面的冗长语法(主要针对未来用户发布，具有不同的用例)替换为:

Note you have the complete structure of the $vuetify.breakpoint object in the docs.
Most likely, you'll want to replace the verbose syntax above (posted mostly for future users, with different use-cases) with:

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

这篇关于在移动设备上将 vuetify 导航栏切换为 mini的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！