如何让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
相关产品推荐
相关产品推荐

