菜单 | Quasar Framework

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 中表示"右"。

TIP

offset 属性是相对于锚点元素的边界框来应用的，应用之后最终位置才会被限制在可用的屏幕空间内。因此，如果偏移量过大，或者 QMenu 锚定在一个全宽/紧贴屏幕边缘的元素上，弹出层可能会被推到视口边缘而被强制裁剪，此时 offset 看起来就像没有生效（被裁剪后的位置与 offset 值无关了）。如果你发现 offset 在某个轴向上似乎被忽略了，请确保所选的 anchor/self 让弹出层有足够的自由空间来扩展——例如，将 QMenu 挂载到一个 inline / inline-block 触发器上，而不是一个全宽的块级元素上。