QMenu 组件是一个方便展示菜单的方式。它可以很好地与 QList 作为下拉内容搭配使用,但不仅限于此。
用法
QMenu 的设计理念是将其作为触发器 DOM 元素/组件的直接子元素放置。不用担心 QMenu 内容会从容器继承 CSS,因为 QMenu 会通过 Quasar Portal 作为 <body> 的直接子元素注入。
TIP
如果您希望菜单可以自动关闭,不要忘记给可点击的菜单项加上 v-close-popup 指令。另外,也可以使用 QMenu 的 auto-close 属性,或者自行通过 v-model 来处理关闭操作。
基础
WARNING
如果您想要有条件地激活或停用 QMenu,请使用 v-if 而不是 v-show。
子菜单
尺寸和样式
上下文菜单
您还可以将 QMenu 作为上下文菜单。在桌面设备上,您需要在父容器上单击鼠标右键来触发它,而在移动设备上,长按即可。
持久化
如果您希望在应用路由变化、按下 ESCAPE 键或点击/触摸 QMenu 外部时不要关闭菜单,那么请使用 persistent 属性:
过渡
在下面的示例中,展示了一些过渡效果。有关可用过渡的完整列表,请转到 过渡效果 页面。
可复用
下面的示例展示了如何创建一个可在不同目标容器中复用的菜单。
定位
QMenu 的位置可以自定义。它会考虑 anchor 和 self 这两个可选属性。QMenu 弹出框的最终位置是计算得出的,以便使其显示在可用的屏幕空间上,并在必要时切换到右侧和/或顶部。
对于水平定位,您可以使用 start 和 end 来自动适应 RTL 或非 RTL。start 和 end 在非 RTL 中表示"左",在 RTL 中表示"右"。
Fit
Cover
Anchor Origin
Vertical
Top
Center
Bottom
Horizontal
Left
Middle
Right
Start
End
Self Origin
Vertical
Top
Center
Bottom
Horizontal
Left
Middle
Right
Start
End
<q-menu anchor="bottom left" self="top left">
<q-item clickable>
<q-item-section>New tab</q-item-section>
</q-item>
<q-item clickable>
<q-item-section>New incognito tab</q-item-section>
</q-item>
</q-menu>content_paste