如何在设备是计算机时永久设置vuetify抽屉菜单，当设备移动时不设置永久菜单。

Question

有人可以帮助设置我的抽屉菜单永久取决于用户设备？我正在考虑使用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>

谢谢。

Answer 1

实际上，您可以将永久绑定直接绑定到断点，而不是计算。

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

Answer 2

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

  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

Answer 3

我找到了适用于我的案子的解决方案。如果有人想和我做同样的事，我会发表文章。

根据网格系统给出用户设备的屏幕大小。若要获得sreen大小，请在计算组件时执行。

       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>