QMenu
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>