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

问题描述

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

我的要求：

当屏幕尺寸 > 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 插件访问当前屏幕宽度。

非常感谢。

解决方法

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

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

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

quasar-framework vue.js