菜单

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

用例

Remember to put the element that activates the menu in the activator slot.

API

v-menu
名称
absolute
默认值
false
类型
boolean

给元素设置绝对定位

名称
activator
默认值
undefined
类型
any

在未使用激活器插槽激活器4.字符串可以是任何有效的查询选择器(querySelector),对象(Object)可以是任何有效的Node对象。

名称
allow-overflow
默认值
false
类型
boolean

移除内容的移除重新定位

名称
attach
默认值
false
类型
any

指定该组件应该分离到哪个DOM元素,使用CSS选择器字符串或元素的对象应用。

名称
auto
默认值
false
类型
boolean

在所选择的元素上居中列表

名称
bottom
默认值
false
类型
boolean

将组件向底部对齐

名称
close-delay
默认值
0
类型
number | string

关闭组件前等待的毫秒数

名称
close-on-click
默认值
true
类型
boolean

指定菜应该在外部激活器被点击时关闭。

名称
close-on-content-click
默认值
true
类型
boolean

指定点击内容时菜单是否应该关闭。

名称
content-class
默认值
undefined
类型
any

将自定义类应用于分离的元素。这是很有用的,因为内容被移动到应用程序的末尾,而不是直接通过组件传递给类。

名称
dark
默认值
false
类型
boolean

Components.Menus.

名称
disable-keys
默认值
false
类型
boolean

Components.Menus.

名称
disabled
默认值
false
类型
boolean

禁用菜单

名称
fixed
默认值
false
类型
boolean

给元素设置固定定位

名称
full-width
默认值
false
类型
boolean

Forces 100% width

名称
input-activator
默认值
false
类型
boolean

Components.Menus.

名称
lazy
默认值
false
类型
boolean

有条件地渲染内容,只有激活时才会渲染内容

名称
left
默认值
false
类型
boolean

将组件向左边对齐

名称
light
默认值
false
类型
boolean

Components.Menus.

名称
max-height
默认值
auto
类型
any

设置内容的最大高度

名称
max-width
默认值
auto
类型
number | string

设置内容的最大宽度

名称
min-width
默认值
undefined
类型
number | string

设置内容的最小宽度

名称
nudge-bottom
默认值
0
类型
number | string

向底部微调内容

名称
nudge-left
默认值
0
类型
number | string

向左侧微调内容

名称
nudge-right
默认值
0
类型
number | string

向右侧微调内容

名称
nudge-top
默认值
0
类型
number | string

向顶部微调内容

名称
nudge-width
默认值
0
类型
number | string

微调内容宽度

名称
offset-overflow
默认值
false
类型
boolean

当由于溢出而重新定位时,导致组件翻转到另一侧

名称
offset-x
默认值
false
类型
boolean

在x轴上偏移菜单,与左/右方向一起工作

名称
offset-y
默认值
false
类型
boolean

在y轴上偏移菜单,与上/下方向一起工作

名称
open-delay
默认值
0
类型
number | string

打开组件前等待的毫秒数

名称
open-on-click
默认值
true
类型
boolean

指定是否在激活器点击时打开菜单

名称
open-on-hover
默认值
false
类型
boolean

指定是否在激活器悬停时打开菜单

名称
origin
默认值
'top left'
类型
string

设置过渡原点

名称
position-x
默认值
undefined
类型
number

用于在不使用激活器插槽时定位内容

名称
position-y
默认值
undefined
类型
number

用于在不使用激活器插槽时定位内容

名称
return-value
默认值
undefined
类型
any

Components.Menus.

名称
right
默认值
false
类型
boolean

将组件向右边对齐

名称
top
默认值
false
类型
boolean

将组件向顶部对齐

名称
transition
默认值
v-menu-transition
类型
boolean | string

设置组件过渡效果,可以是内置的过渡配置或者是您自己的配置的其中一个。

名称
value
默认值
undefined
类型
any

控制可见性

名称
z-index
默认值
undefined
类型
number | string

用于组件的z-index

示例

绝对定位

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

没有激活时的绝对定位

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

With the new v-slot syntax, nested activators such as those seen with a v-menu and v-tooltip attached to the same activator button, need a particular setup in order to function correctly. Note: this same syntax is used for other nested activators such as v-dialog w/ v-tooltip.

悬停

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

菜单

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

自定义过渡

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

弹出菜单

可以将菜单配置为在打开时为静态,使其可以用作弹出窗口。当菜单内容有多个交互项时,这可能很有用。

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore