QMenu 组件是一种显示菜单的便捷方式。与 QList 作为下拉菜单内容非常匹配,但绝不限于此。
¥The QMenu component is a convenient way to show menus. Goes very well with QList as dropdown content, but it’s by no means limited to it.
用法(Usage)
¥Usage
QMenu 的思路是将其放置在你想要触发的 DOM 元素/组件中,作为直接子元素。不必担心 QMenu 内容会从容器继承 CSS,因为 QMenu 将通过 Quasar Portal 作为 <body>
的直接子项注入。
¥The idea with QMenu is to place it inside your DOM element / component that you want to be the trigger as direct child. Don’t worry about QMenu content inheriting CSS from the container as the QMenu will be injected as a direct child of <body>
through a Quasar Portal.
提示
如果你希望菜单自动关闭,请不要忘记在可点击菜单项中使用指令 v-close-popup
。或者,你可以使用 QMenu 的属性 auto-close
,或通过其 v-model 自行处理菜单的关闭操作。
¥Don’t forget to use the directive v-close-popup
in your clickable menu items if you want the menu to close automatically. Alternatively, you can use the QMenu’s property auto-close
or handle closing the menu yourself through its v-model.
基本(Basic)
¥Basic
警告
如果你想有条件地激活或停用 QMenu,请使用 v-if
而不是 v-show
。
¥If you want to conditionally activate or de-activate a QMenu, please use v-if
on it instead of v-show
.
子菜单(Submenus)
¥Submenus
尺寸和样式(Sizing and styling)
¥Sizing and styling
上下文菜单(Context menu)
¥Context menu
你还可以将 QMenu 设置为上下文菜单。在桌面设备上,你需要右键单击父目标才能触发它,而在移动设备上,长按即可完成操作。
¥You can also set QMenu to act as a context menu. On desktop, you need to right click the parent target to trigger it, and on mobile a long tap will do the job.
持久化(Persistent)
¥Persistent
如果你希望 QMenu 在应用路由改变、按下 ESCAPE 键或在菜单外点击/轻触时不关闭,请使用 persistent
属性:
¥If you want the QMenu to not close if app route changes or if hitting ESCAPE key or if clicking/tapping outside of the menu, then use persistent
prop:
过渡效果(Transitions)
¥Transitions
在下面的例子中,展示了一些过渡效果。要查看可用的转换的完整列表,请前往 过渡效果。
¥In the example below there’s a few transitions showcased. For a full list of transitions available, go to Transitions.
可重用(Reusable)
¥Reusable
以下示例展示了如何创建可重复使用的菜单,并与不同目标共享。
¥The example below shows how to create a re-usable menu that can be shared with different targets.
定位(Positioning)
¥Positioning
QMenu 的位置可以自定义。它记录了 anchor
和 self
可选属性。QMenu 弹出窗口的最终位置经过计算,使其显示在可用的屏幕空间上,并在必要时切换到右侧和/或顶部。
¥The position of QMenu can be customized. It keeps account of the anchor
and self
optional props. The final position of QMenu popup is calculated so that it will be displayed on the available screen real estate, switching to the right-side and/or top-side when necessary.
对于水平定位,当你希望自动考虑是 RTL 还是非 RTL 时,可以使用 start
和 end
。start
和 end
表示非 RTL 的 “left” 和 RTL 的 “right”。
¥For horizontal positioning you can use start
and end
when you want to automatically take into account if on RTL or non-RTL. start
and end
mean “left” for non-RTL and “right” for RTL.
<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>