# 菜单 (Menus)

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

# 使用

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

# API

# 示例

# 属性

# 绝对定位

菜单可以使用 absolute 属性,将其绝对放置在激活器元素的顶部。 尝试点击图像上的任意位置。

# 没有激活器的绝对定位

菜单也可以通过使用 absolute 以及 position-xposition-y 参数来在没有激活器的情况下使用。 尝试右键点击图像上的任何地方。

# 点击关闭

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

# 点击内容后关闭

您可以配置在点击内容后是否关闭 v-menu

# 禁用

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

# X 偏移

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

# Y 偏移

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

# 悬停时打开

设置使用 open-on-hover 属性时,菜单会悬停时打开而不是点击时打开。

# Rounded(圆角)

菜单可以通过 rounded 属性设置为圆角。 关于圆角样式的其他信息在 Border Radius页。

# 插槽

# 同时使用激活器和提示

在新的 v-slot 语法中, 嵌套的激活器,例如用 v-menuv-tooltip 附加到同一激活按钮, 需要特定的设置才能正常运行。 注意:此语法同样用于其他嵌套激活器,例如 v-dialog / v-tooltip

# 其他

# 自定义过渡

Vuetify有三个标准过渡, scaleslide-xslide-y。 您也可以创建自己的过渡并作为过渡参数传递。 For an example of how the stock transitions are constructed, visit here.

# 弹出菜单

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

# 在组件中使用

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

# 无障碍

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

了解更多?

继续学习由 我们的团队 选择的相关内容,或通过使用下面的导航链接在页面之间跳转。
GitHub 上编辑此页面
最后更新:11/12/2024, 6:59:50 AM