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

Posted 2023-02-23

【中文标题】如何默认导航抽屉在移动设备上关闭并在桌面上打开？

【英文标题】：How to default navigation drawer to closed on mobile and open on desktop?

【发布时间】：2021-04-09 15:28:37

【问题描述】：

我正在使用 vue js 的 quasar 框架。我有一个滑动导航抽屉。我正在努力使其打开/关闭状态在移动/桌面上正常运行。

我的要求：

屏幕尺寸 > 1023 像素时默认打开抽屉 当屏幕尺寸 > 1023 像素时，提供通过按钮将抽屉置于迷你模式的选项（这是抽屉的压缩版本，作为其存在于用户的视觉指示器） 当屏幕

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

这是我尝试过的：

<q-drawer
  v-model="rightDrawer"
  side="right"
  :mini="miniStateRight"
  :
  :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 插件访问当前屏幕宽度。

非常感谢。

【问题讨论】：

您是否尝试过创建一个mounted 函数来检查屏幕宽度，然后根据结果设置rightDrawer 值？

【参考方案1】：

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

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

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