菜单 (Menus)

v-menu 组件可以在某个激活菜单的元素位置显示一个菜单。

使用

有三种主要的方式定义菜单。

第一种是使用 activator 插槽。不要忘记在激活用的元素上绑定（使用 v-bind） props 插槽。

第二种是给 activator 属性赋值 parent。这样就能使菜单的父元素成为激活元素。

第三种则是在菜单的 activator 属性设置为某个 CSS 选择器字符串。这种方法可以在页面中将菜单和激活元素分离。

API

组件	描述
v-menu	主要组件
v-btn	子组件，常用作v-menu 的激活器
v-list-item	子组件，常用作 v-menu 的内容

示例

属性

显示位置 (Location)

菜单可以根据 location 属性从相对于激活元素的设定方向弹出。可以参考 location here 的 文档。

悬停时打开

设置 open-on-hover 属性，可以使菜单悬停时打开，取代默认的点击才打开。

插槽

同时使用激活器和提示

在新的 v-slot 语法中，如果是嵌套的激活元素，例如用 v-menu 和 v-tooltip 附加到同一激活按钮， 需要特定的设置才能正常运行。

INFO

其他嵌套的激活元素例如 v-dialog 和 v-tooltip 也是这样。

其他

过渡动画

Vuetify 带有几个标准转换 several standard transitions 您可以使用。您还可以创建自己的并将其作为转换参数传递。有关如何构建库存转换的示例，请访问此处here 。

弹出菜单

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

组件内使用菜单

菜单组件可以放置于几乎任何组件中。