Vue 巨型菜单组件 - PrimeVue 组件库

导入 #


import MegaMenu from 'primevue/megamenu';

基本 #

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


<MegaMenu :model="items" />

垂直 #

巨型菜单的布局通过 orientation 属性配置，该属性接受 horizontal 和 vertical 作为选项。


<MegaMenu :model="items" orientation="vertical" />

模板 #

巨型菜单通过 item 模板提供项目自定义功能，该模板接收模型中的菜单项实例作为参数。还提供了名为 start 和 end 的附加插槽，用于在菜单之前或之后嵌入内容。


<MegaMenu :model="items" class="p-4 bg-surface-0" style="border-radius: 3rem">
    <template #start>
        <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>
    </template>
    <template #item="{ item }">
        <a v-if="item.root" class="flex items-center cursor-pointer px-4 py-2 overflow-hidden relative font-semibold text-lg uppercase" style="border-radius: 2rem">
            <span>{{ item.label }}</span>
        </a>
        <a v-else-if="!item.image" class="flex items-center p-4 cursor-pointer mb-2 gap-3">
            <span class="inline-flex items-center justify-center rounded-full bg-primary text-primary-contrast w-12 h-12">
                <i :class="[item.icon, 'text-lg']"></i>
            </span>
            <span class="inline-flex flex-col gap-1">
                <span class="font-bold text-lg">{{ item.label }}</span>
                <span class="whitespace-nowrap">{{ item.subtext }}</span>
            </span>
        </a>
        <div v-else class="flex flex-col items-start gap-4 p-2">
            <img alt="megamenu-demo" :src="item.image" class="w-full" />
            <span>{{ item.subtext }}</span>
            <Button :label="item.label" outlined />
        </div>
    </template>
    <template #end>
        <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
    </template>
</MegaMenu>

命令 #

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


{
    label: 'Log out',
    icon: 'pi pi-signout',
    command: () => {
        // Callback to run
    }
}

路由器 #

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


<MegaMenu :model="items">
    <template #item="{ item }">
        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
            <a v-ripple :href="href" @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">
            <span :class="item.icon" />
            <span class="ml-2">{{ item.label }}</span>
        </a>
    </template>
</MegaMenu>

可访问性 #

屏幕阅读器

巨型菜单组件使用 menubar 角色以及 aria-orientation，描述组件的值可以通过 aria-labelledby 或 aria-label 属性提供。每个列表项都有一个 menuitem 角色，其中 aria-label 指的是项目的标签，如果项目被禁用，则定义 aria-disabled。巨型菜单中的子菜单使用 menu 角色，aria-labelledby 定义为子菜单根菜单项标签的 ID。此外，打开子菜单的根菜单项具有 aria-haspopup 和 aria-expanded，以定义项目和子菜单之间的关系。

键盘支持

按键	功能
tab	如果焦点移入菜单，则将焦点添加到第一个项目。如果焦点已经在菜单内，则焦点将移动到页面 tab 序列中的下一个可聚焦项目。
shift + tab	如果焦点移入菜单，则将焦点添加到第一个项目。如果焦点已经在菜单内，则焦点将移动到页面 tab 序列中的上一个可聚焦项目。
enter	如果菜单项有子菜单，则切换子菜单的可见性，否则激活菜单项并关闭所有打开的覆盖层。
space	如果菜单项有子菜单，则切换子菜单的可见性，否则激活菜单项并关闭所有打开的覆盖层。
escape	如果焦点在弹出子菜单内，则关闭子菜单并将焦点移动到已关闭子菜单的根项。
向下箭头	如果焦点在根元素上，则打开子菜单并将焦点移动到子菜单中的第一个元素，否则将焦点移动到子菜单中的下一个菜单项。
向上箭头	如果焦点在根元素上，则打开子菜单并将焦点移动到子菜单中的最后一个元素，否则将焦点移动到子菜单中的上一个菜单项。
alt + 向上箭头	如果焦点在弹出菜单内，则将焦点移动到子菜单中的第一个元素，否则关闭子菜单并将焦点移动到水平模式下已关闭子菜单的根项。
向右箭头	如果焦点在根元素上，则将焦点移动到下一个菜单项。如果焦点在子菜单内，则将焦点移动到下一个菜单组的第一个菜单项。
向左箭头	如果焦点在根元素上，则将焦点移动到上一个菜单项。如果焦点在子菜单内，则将焦点移动到上一个菜单组的第一个菜单项。
home	将焦点移动到子菜单中的第一个菜单项。
end	将焦点移动到子菜单中的最后一个菜单项。
任何可打印字符	将焦点移动到标签以键入的字符开头的菜单项。

巨型菜单