QMenu组件是显示菜单的便捷方式。 与QList作为下拉内容配合得很好,但绝不仅限于此。
QMenu API
用法
QMenu的想法是将其放置在您希望成为触发器的DOM元素/组件中, 作为直接子元素。 不必担心QMenu内容会从容器继承CSS,因为QMenu将通过Quasar Portal作为<body>
的直接子元素注入。
TIP
如果您希望菜单自动关闭,请不要忘记在可单击的菜单项中使用指令v-close-popup
。 另外,您可以使用QMenu的属性auto-close
,也可以通过其v-model自行处理关闭菜单的操作。
基础
子菜单
大小和风格
上下文菜单
您还可以设置QMenu作为上下文菜单。 在桌面设备上,您需要右键单击父目标以触发它,而在移动设备上,长按即可完成任务。
持久
如果您希望在应用程序路由更改,按ESCAPE键或在菜单外部单击/轻击时不关闭QMenu,请使用persistent
属性:
过渡
在下面的示例中,展示了一些过渡。 有关可用过渡的完整列表,请转到过渡。
可重用
下面的示例显示了如何创建可与不同目标共享的可重复使用的菜单。\
定位
QMenu的位置可以自定义。 它有anchor
和self
可选属性。 计算QMenu弹出窗口的最终位置,以便将其显示在可用的屏幕空间上,并在必要时切换到右侧和/或顶部。
对于水平定位,您可以使用start
和end
来自动考虑是在RTL上还是在非RTL上。start
和end
表示非RTL的“left”,表示RTL的“right”。
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>