v-menu
组件在激活它的元素的位置上展示一个菜单。
从下面选择您想要的组件,并查看可用的属性、插槽、事件和函数。
给组件应用 position: absolute
当未使用 activator
插槽时,指定自定义激活器。String 可以是任何有效的 querySelector,对象可以是任何有效的 Node。
移除内容的溢出重新定位
指定此组件应该与哪个 DOM 元素分离。to.String 可以是任何有效的 querySelector,对象可以是任何有效的 Node。这将默认挂载到根节点 v-app
。
在所选择的元素上居中列表
将组件向底部对齐。
Milliseconds to wait before closing component. Only works with the open-on-hover prop
指定菜应该在外部激活器被点击时关闭。
指定点击内容时菜单是否应该关闭。
将自定义类应用于分离的元素。这很有用,因为内容被移动到 v-app
组件的开头(除非提供了 attach 属性),并且不被直接作为目标传递到组件上的类。
将暗色主题变量应用到组件。你可以在 dark themes 的 Material Design 文档中找到更多有关信息。
移除所有键盘交互功能
禁用菜单
将强制组件内容在加载时呈现。如果存在内容的话,则不会在 DOM 中渲染,如果你想优化 SEO,这是非常有用的。
给组件应用 position: fixed
与文档相反,分离组件内部的菜单内容。
将组件向左边对齐。
为组件设置浅色主题。
设置菜单内容的最大高度
设置内容的最大宽度
设置内容的最小宽度
向底部微调内容
向左侧微调内容
向右侧微调内容
向顶部微调内容
微调内容宽度
当由于溢出而重新定位时,导致组件翻转到另一侧
在x轴上偏移菜单,与左/右方向一起工作
在y轴上偏移菜单,与上/下方向一起工作
Milliseconds to wait before opening component. Only works with the open-on-hover prop
指定是否在激活器点击时打开菜单
指定是否在激活器悬停时打开菜单
用于在不使用激活器插槽时定位内容
用于在不使用激活器插槽时定位内容
关闭菜单时更新的值 - 必须为原始值。 支持点表示法
将组件向右边对齐。
Designates the border-radius applied to the component. You can find more information on the Border Radius page.
Removes the component's border-radius.
将组件向顶部对齐。
设置组件转换。可以是一个 built in transitions 或者是自己自定义的。
控制组件可见还是隐藏。
用于组件的 z-index
使用时,将在点击后激活组件(或悬停特定组件),它手动阻止事件传播。如果通过模型打开组件而没有此插槽,则需要手动阻止事件传播。
{
attrs: { role: string, aria-haspopup: boolean, aria-expanded: string }
on: { [eventName]: eventHandler }
value: boolean
}
默认Vue 插槽。
$border-radius-root !default;
8 !default;
下面是一些简单到复杂的例子。
菜单也可以使用absolute
属性绝对定位在激活元素的顶部。尝试点击图片上的任何地方。
在新的 v-slot
语法中,嵌套的激活器(比如与同一个激活器按钮相连的 v-menu
和 v-tooltip
)需要特殊的设置才能正常工作。注意:同样的语法也适用于其他嵌套的激活器,比如 v-dialog
w/ v-tooltip
。
菜单可以使用悬停进行访问,而不是点击 open-on-hover
属性。
Vuetify 带有3个标准过渡,scale、slide-x 和 slide-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.
失去焦点时可以关闭菜单。
您可以配置单击 v-menu
的内容时是否应关闭它。
菜单也可以通过 absolute
属性跟 position-x
和 position-y
属性一起使用。尝试右键单击图像上的任意位置。
菜单可以放在几乎任何组件中
菜单可以配置为在打开时为静态菜单,使其充当弹出菜单。 当菜单内容中有多个交互式项目时,这很有用。
默认情况下,v-menu
组件被 detached 并移动到你的应用程序的根目录下。为了正确地支持 将动态内容插入到 DOM,你必须_使用 attach prop。这将确保在按 tab 键时,焦点从激活器转移到内容上。