如何默认导航抽屉在移动设备上关闭并在桌面上打开？

Question

我正在使用 vue js 的 quasar 框架。我有一个滑动导航抽屉。我正在努力使其 open/closed 状态在 mobile/desktop.

上正常运行

我的要求：

当屏幕尺寸 > 1023 像素时抽屉默认打开
当屏幕尺寸 > 1023 像素时，提供通过按钮将抽屉置于迷你模式的选项（这是抽屉的压缩版本，作为用户存在的视觉指示器）
当屏幕 < 1023 像素时，抽屉应处于移动模式（即需要从左向右滑动手势才能显示）。

我可以完成上面的前两个要点，但是当我在移动设备上时，我似乎无法让抽屉在页面加载时开始隐藏。当页面加载时，抽屉处于打开状态。如果用户自己打开抽屉，则抽屉只能在移动设备上处于打开状态。

这是我尝试过的：

<q-drawer
  v-model="rightDrawer"
  side="right"
  :mini="miniStateRight"
  :width="350"
  :breakpoint="1023"
  bordered
  overlay
  content-class="bg-grey-3"
>
  <q-page-sticky class="gt-sm" position="left" :offset="[-15, 0]">
    <q-btn
      @click="miniStateRight = !miniStateRight"
      round
      color="primary"
      size="sm"
      icon="mdi-feature-search-outline"
    />
  </q-page-sticky>
</q-drawer>

data: () => ({
  rightDrawer: true,
  miniStateRight: false,
}),

当屏幕小于 1023 像素时，如何让抽屉在页面加载时默认关闭位置？我可以通过 $q.screen.width 插件访问当前屏幕宽度。

非常感谢。

Answer 1

您可以通过比较屏幕宽度将数据中的抽屉值设置为true或false。

示例 - drawer: this.$q.screen.width < 1023?false:true,

工作代码笔 - https://codepen.io/Pratik__007/pen/poELqgK

如何默认导航抽屉在移动设备上关闭并在桌面上打开？

How to default navigation drawer to closed on mobile and open on desktop?

vue.js

quasar-framework