为什么捐赠
API 浏览器
联系站长
菜单

QMenu 组件是一个方便展示菜单的方式。它可以很好地与 QList 作为下拉内容搭配使用,但不仅限于此。

正在加载 QMenu API...

用法

QMenu 的设计理念是将其作为触发器 DOM 元素/组件的直接子元素放置。不用担心 QMenu 内容会从容器继承 CSS,因为 QMenu 会通过 Quasar Portal 作为 <body> 的直接子元素注入。

TIP

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

基础

基础



内容示例



通过 v-model 切换



WARNING

如果您想要有条件地激活或停用 QMenu,请使用 v-if 而不是 v-show

子菜单

嵌套菜单



尺寸和样式

尺寸



样式



上下文菜单

您还可以将 QMenu 作为上下文菜单。在桌面设备上,您需要在父容器上单击鼠标右键来触发它,而在移动设备上,长按即可。

上下文菜单



持久化

如果您希望在应用路由变化、按下 ESCAPE 键或点击/触摸 QMenu 外部时不要关闭菜单,那么请使用 persistent 属性:

持久化



过渡

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

过渡效果示例



可复用

下面的示例展示了如何创建一个可在不同目标容器中复用的菜单。

使用 target 属性



定位

定位示例



QMenu 的位置可以自定义。它会考虑 anchorself 这两个可选属性。QMenu 弹出框的最终位置是计算得出的,以便使其显示在可用的屏幕空间上,并在必要时切换到右侧和/或顶部。

对于水平定位,您可以使用 startend 来自动适应 RTL 或非 RTL。startend 在非 RTL 中表示"左",在 RTL 中表示"右"。


Fit
Cover
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>