You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何让QDrawer永久显示并隐藏汉堡图标?是否有可替代组件?

QDrawer永久显示+隐藏汉堡图标解决方案

直接使用QDrawer实现(推荐)

QDrawer本身就支持永久显示配置,无需更换组件:

  • 给QDrawer组件添加permanent属性,添加后抽屉会在所有视口尺寸下固定显示,不会响应断点自动隐藏,也无需绑定v-model控制显隐状态,参考代码:
<q-drawer 
  permanent
  side="left" 
  width="280"
  class="bg-grey-1"
>
  <!-- 此处写抽屉内部内容 -->
</q-drawer>
  • 隐藏汉堡图标:你截图中标注的汉堡图标是和抽屉显隐绑定的自定义触发按钮,直接删除该按钮的代码,或者给按钮添加v-if="false"属性即可隐藏,不需要修改QDrawer的配置。

替代方案

如果你完全不需要抽屉的滑入滑出等交互能力,也可以直接写固定布局的侧边容器,代码更轻量:

<q-layout view="hHh LpR lFf">
  <!-- 固定侧边栏 -->
  <div class="absolute left-0 top-0 bottom-0 w-72 bg-white border-r z-10">
    <!-- 侧边栏内容 -->
  </div>
  <!-- 页面内容区域,增加左边距避开侧边栏 -->
  <q-page-container class="pl-72">
    <q-page>
      <!-- 页面内容 -->
    </q-page>
  </q-page-container>
</q-layout>

内容的提问来源于stack exchange,提问作者william007

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.27 01:36:06