如何在设备为计算机时将 vuetify 抽屉菜单设置为永久，而在设备为移动设备时设置为非永久答案

【问题标题】：How to set vuetify drawer menu permanent when the devices is computer and no permanant when the device is mobile如何在设备为计算机时将 vuetify 抽屉菜单设置为永久，而在设备为移动设备时设置为非永久
【发布时间】：2020-06-10 06:51:06
【问题描述】：

有人可以根据用户设备帮助我永久设置抽屉菜单吗？本来想用vuetify网格系统看看自己是lg还是md还是sm，但是不知道怎么做。

这是我的抽屉菜单代码：

<v-navigation-drawer
            @input="updateDrawer"
            :hide-overlay="true"
            :mini-variant="true"
            :expand-on-hover="true"
            :touchless="true"
            :disable-resize-watcher="false"
            style="min-width: 100px!important;"
            v-model="d"
            //here set this: :permanent="!isMobile"
            app
            clipped
    >
        ...

    </v-navigation-drawer>

谢谢。

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

其实你可以直接绑定永久断点，而不是计算。

:permanent="!$vuetify.breakpoint.xsOnly"

【讨论】：

没错。谢谢。我认为这是简单的解决方案。我接受它
完全没有，很乐意提供帮助。
喜欢这个。另外：:permanent="!$vuetify.breakpoint.sm && !$vuetify.breakpoint.xs"

【解决方案2】：

如果您仍希望允许手动切换导航抽屉（使用汉堡按钮），您可以为 v-model 添加另一个计算属性。这允许抽屉根据断点自动显示/隐藏或手动切换...

  computed: {
    isLarge() {
        return this.$vuetify.breakpoint.name !== 'xs'
    },
    showDrawer() {
        return this.isLarge || this.drawer
    }
  }, 


<v-navigation-drawer 
      v-model="showDrawer"
      :permanent="isLarge"
      color="primary"
      absolute 
      dark>..
</<v-navigation-drawer>

https://codeply.com/p/Y883gzgiKe

【讨论】：

【解决方案3】：

我发现这个解决方案适用于我的情况。我发布以防有人想和我做同样的事情。

vuetify 可以根据网格系统为您提供用户设备屏幕尺寸。要获取屏幕大小，请在计算组件时执行。

       computed: {
            isComputer() {
                return this.$vuetify.breakpoint.name !== 'xs';
            }
        }

抽屉菜单代码可以这样更新：

   <v-navigation-drawer
            ...
            //listen if it's a computer(in my case i want md, lg, sm as computer)
            :permanent="isComputer"
            app
            clipped
    ></v-navigation-drawer>

【讨论】：