分层菜单

分层菜单在嵌套覆盖层中显示子菜单。

导入 #


import TieredMenu from 'primevue/tieredmenu';

基本 #

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


<TieredMenu :model="items" />

弹出 #

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


<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_tmenu" />
<TieredMenu ref="menu" id="overlay_tmenu" :model="items" popup />

模板 #

分层菜单使用 item 模板提供项自定义，该模板接收来自模型的菜单项实例作为参数。


<TieredMenu :model="items">
    <template #item="{ item, props, hasSubmenu }">
        <a v-ripple class="flex items-center" v-bind="props.action">
            <span :class="item.icon" />
            <span class="ml-2">{{ 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>
            <i v-if="hasSubmenu" class="pi pi-angle-right ml-auto"></i>
        </a>
    </template>
</TieredMenu>

命令 #

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


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

路由 #

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


<TieredMenu :model="items">
    <template #item="{ item, props, hasSubmenu }">
        <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>
            <span v-if="hasSubmenu" class="pi pi-angle-right ml-auto" />
        </a>
    </template>
</TieredMenu>

辅助功能 #

屏幕阅读器

分层菜单组件使用 menubar 角色，aria-orientation 设置为“垂直”，可以使用 aria-labelledby 或 aria-label 属性提供描述菜单的值。每个列表项都有一个 menuitem 角色，aria-label 指的是项的标签，如果该项已禁用，则定义 aria-disabled。分层菜单中的子菜单使用 menu 角色，并定义 aria-labelledby 作为子菜单根菜单项标签的 ID。此外，打开子菜单的菜单项具有 aria-haspopup 和 aria-expanded，以定义项和子菜单之间的关系。

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

键盘支持

键	功能
tab	如果焦点移入菜单，则将焦点添加到第一个项目。如果焦点已在菜单中，则焦点将移动到页面 tab 顺序中的下一个可聚焦项目。
shift + tab	如果焦点移入菜单，则将焦点添加到第一个项目。如果焦点已在菜单中，则焦点将移动到页面 tab 顺序中的上一个可聚焦项目。
enter	如果菜单项有子菜单，则打开子菜单，否则激活菜单项并关闭所有打开的覆盖层。
空格	如果菜单项有子菜单，则打开子菜单，否则激活菜单项并关闭所有打开的覆盖层。
escape	如果焦点在弹出子菜单内部，则关闭子菜单并将焦点移动到关闭的子菜单的根项。
向下箭头	将焦点移动到子菜单中的下一个菜单项。
向上箭头	将焦点移动到子菜单中的上一个菜单项。
alt + 向上箭头	关闭弹出窗口，然后将焦点移动到目标元素。
向右箭头	如果选项已关闭，则打开该选项，否则将焦点移动到第一个子选项。
向左箭头	如果选项已打开，则关闭该选项，否则将焦点移动到父选项。
home	将焦点移动到子菜单中的第一个菜单项。
end	将焦点移动到子菜单中的最后一个菜单项。
任何可打印字符	将焦点移动到标签以键入的字符开头的菜单项。