QMenu

QMenu组件是显示菜单的便捷方式。 与QList作为下拉内容配合得很好,但绝不仅限于此。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

用法

QMenu的想法是将其放置在您希望成为触发器的DOM元素/组件中, 作为直接子元素。 不必担心QMenu内容会从容器继承CSS,因为QMenu将通过Quasar Portal作为<body>的直接子元素注入。

TIP

如果您希望菜单自动关闭,请不要忘记在可单击的菜单项中使用指令v-close-popup。 另外,您可以使用QMenu的属性auto-close,也可以通过其v-model自行处理关闭菜单的操作。

基础

Basic
Idea for content
Toggle through v-model

子菜单

Menus in menus

大小和风格

Sizing
Style

上下文菜单

您还可以设置QMenu作为上下文菜单。 在桌面设备上,您需要右键单击父目标以触发它,而在移动设备上,长按即可完成任务。

Context Menu

持久

如果您希望在应用程序路由更改,按ESCAPE键或在菜单外部单击/轻击时不关闭QMenu,请使用persistent属性:

Persistent

过渡

在下面的示例中,展示了一些过渡。 有关可用过渡的完整列表,请转到过渡

Transition examples

可重用

下面的示例显示了如何创建可与不同目标共享的可重复使用的菜单。\

Using target

定位

Position examples

QMenu的位置可以自定义。 它有anchorself可选属性。 计算QMenu弹出窗口的最终位置,以便将其显示在可用的屏幕空间上,并在必要时切换到右侧和/或顶部。

对于水平定位,您可以使用startend来自动考虑是在RTL上还是在非RTL上。startend表示非RTL的“left”,表示RTL的“right”。

Anchor Origin
Vertical
Horizontal
Self Origin
Vertical
Horizontal
<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>

QMenu API

Loading API...
Please wait...