菜单

菜单在垂直方向显示项目列表。

导入 #


import Menu from 'primevue/menu';

基本 #

菜单需要一个菜单项集合作为其模型。


<Menu :model="items" />

分组 #

菜单支持通过使用items属性定义子项来实现单级分组。


<Menu :model="items" />

弹出 #

通过添加popup属性并使用目标事件调用菜单引用的toggle函数来启用覆盖模式。


<Button type="button" icon="pi pi-ellipsis-v" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
<Menu ref="menu" id="overlay_menu" :model="items" :popup="true" />

模板 #

菜单通过接收模型中的菜单项实例作为参数的item模板提供项目自定义。子菜单标签有自己的submenulabel模板，还提供了名为start和end的额外插槽，用于在菜单之前或之后嵌入内容。


<Menu :model="items" class="w-full md:w-60">
    <template #start>
        <span class="inline-flex items-center gap-1 px-2 py-2">
            <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-8">
                <path d="..." fill="var(--p-primary-color)" />
                <path d="..." fill="var(--p-text-color)" />
            </svg>
            <span class="text-xl font-semibold">PRIME<span class="text-primary">APP</span></span>
        </span>
    </template>
    <template #submenulabel="{ item }">
        <span class="text-primary font-bold">{{ item.label }}</span>
    </template>
    <template #item="{ item, props }">
        <a v-ripple class="flex items-center" v-bind="props.action">
            <span :class="item.icon" />
            <span>{{ item.label }}</span>
            <Badge v-if="item.badge" class="ml-auto" :value="item.badge" />
            <span v-if="item.shortcut" class="ml-auto border border-surface rounded bg-emphasis text-muted-color text-xs p-1">{{ item.shortcut }}</span>
        </a>
    </template>
    <template #end>
        <button v-ripple class="relative overflow-hidden w-full border-0 bg-transparent flex items-start p-2 pl-4 hover:bg-surface-100 dark:hover:bg-surface-800 rounded-none cursor-pointer transition-colors duration-200">
            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" class="mr-2" shape="circle" />
            <span class="inline-flex flex-col items-start">
                <span class="font-bold">Amy Elsner</span>
                <span class="text-sm">Admin</span>
            </span>
        </button>
    </template>
</Menu>

命令 #

command属性定义当通过单击或按键事件激活项目时要运行的回调。


<Menu :model="items" />
<Toast />

路由器 #

带有导航的项目通过模板化定义，以便能够使用路由器链接组件、外部链接或编程导航。


<Menu :model="items">
    <template #item="{ item, props }">
        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
            <a v-ripple :href="href" v-bind="props.action" @click="navigate">
                <span :class="item.icon" />
                <span class="ml-2">{{ item.label }}</span>
            </a>
        </router-link>
        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
            <span :class="item.icon" />
            <span class="ml-2">{{ item.label }}</span>
        </a>
    </template>
</Menu>

可访问性 #

屏幕阅读器

菜单组件使用menu角色，用于描述菜单的值可以使用aria-labelledby或aria-label属性提供。每个列表项都有一个menuitem角色，其中aria-label引用项目的标签，如果禁用该项目，则定义aria-disabled。

在弹出模式下，组件隐式管理目标元素的aria-expanded、aria-haspopup和aria-controls属性，以定义目标和弹出窗口之间的关系。

键盘支持

按键	功能
tab	如果焦点移动到菜单中，则将焦点添加到第一个项目。如果焦点已在菜单中，则焦点移动到页面标签序列中的下一个可聚焦项目。
shift + tab	如果焦点移动到菜单中，则将焦点添加到第一个项目。如果焦点已在菜单中，则焦点移动到页面标签序列中的上一个可聚焦项目。
enter	激活聚焦的菜单项。如果菜单处于覆盖模式，则弹出窗口关闭，焦点移动到目标。
space	激活聚焦的菜单项。如果菜单处于覆盖模式，则弹出窗口关闭，焦点移动到目标。
escape	如果菜单处于覆盖模式，则弹出窗口关闭，焦点移动到目标。
向下箭头	将焦点移动到下一个菜单项。
向上箭头	将焦点移动到上一个菜单项。
alt + 向上箭头	如果菜单处于覆盖模式，则弹出窗口关闭，焦点移动到目标。
home	将焦点移动到第一个菜单项。
end	将焦点移动到最后一个菜单项。

菜单