如何默认导航抽屉在移动设备上关闭并在桌面上打开? [英] How to default navigation drawer to closed on mobile and open on desktop?

问题描述

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

Im using the quasar framework for vue js. I have a sliding nav drawer. I am struggling to get its open/closed state to behave properly on mobile/desktop.

我的要求:

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

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

I can accomplish the first two bullet points above, but when I'm on a mobile device I can't seem to get the drawer to start hidden on page load. When the page loads, the drawer is in open state. The drawer should only be in open state on mobile if the user opens it themselves.

这是我尝试过的:

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

How can I get the drawer to default to the closed position on page load when the screen is < 1023 pixels? I have access to the current screen width via $q.screen.width plugin.

非常感谢.

推荐答案

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

You can just set the drawer value to true or false in data by comparing screen width.

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

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

这篇关于如何默认导航抽屉在移动设备上关闭并在桌面上打开?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！