Vuetify

商店

企业版

v-menu 组件在激活它的元素的位置上展示一个菜单。

请记住将激活菜单的元素放置在 activator 插槽中。

从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。

下面是一些简单到复杂的例子。

菜单也可以使用absolute属性绝对定位在激活元素的顶部。尝试点击图片上的任何地方。

在新的 v-slot 语法中,嵌套的激活器(比如与同一个激活器按钮相连的 v-menuv-tooltip)需要特殊的设置才能正常工作。注意:同样的语法也适用于其他嵌套的激活器,比如 v-dialog w/ v-tooltip

菜单可以使用悬停进行访问,而不是点击 open-on-hover 属性。

Vuetify 带有3个标准过渡,scaleslide-xslide-y。您也可以创建自己的并将其作为过渡参数传递。有关如何构建内置过渡的示例,请访问 here

您可以禁用菜单。 禁用的菜单无法打开。

菜单可以通过 X 轴偏移,以使激活器可见。

菜单可以通过 Y 轴偏移,以使激活器可见。

Menus can have their border-radius set by the rounded prop. Additional information about rounded classes is on the Border Radius page.

New in v2.3

失去焦点时可以关闭菜单。

您可以配置单击 v-menu 的内容时是否应关闭它。

菜单也可以通过 absolute 属性跟 position-xposition-y 属性一起使用。尝试右键单击图像上的任意位置。

菜单可以放在几乎任何组件中

菜单可以配置为在打开时为静态菜单,使其充当弹出菜单。 当菜单内容中有多个交互式项目时,这很有用。

默认情况下,v-menu 组件被 detached 并移动到你的应用程序的根目录下。为了正确地支持 将动态内容插入到 DOM,你必须_使用 attach prop。这将确保在按 tab 键时,焦点从激活器转移到内容上。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!