上下文菜单

上下文菜单显示一个覆盖菜单，以显示与元素相关的操作。

导入 # 


import ContextMenu from 'primevue/contextmenu';

基本 #

上下文菜单需要一个菜单项集合作为其model，并且需要使用目标事件（如contextmenu）显式调用 show 方法以显示菜单。

Logo

<img alt="Logo" src="/images/nature/nature2.jpg" class="w-full md:w-[30rem] rounded shadow-lg" @contextmenu="onImageRightClick" aria-haspopup="true" />
<ContextMenu ref="menu" :model="items" />

文档 #

设置全局属性会将上下文菜单附加到文档。

在此页面上的任意位置右键单击以查看全局上下文菜单。


<ContextMenu global :model="items" />

模板 #

上下文菜单提供使用 item 模板进行的项自定义，该模板接收模型中的 menuitem 实例作为参数。


<ul class="m-0 p-0 list-none border border-surface-200 dark:border-surface-700 rounded p-4 flex flex-col gap-2 w-full md:w-[30rem]">
    <li
        v-for="product in products"
        :key="product.id"
        :class="['p-2 hover:bg-surface-100 dark:hover:bg-surface-800 rounded border border-transparent transition-all transition-duration-200', { 'border-primary': selectedId === product.id }]"
        @contextmenu="onRightClick($event, product.id)"
    >
        <div class="flex flex-wrap p-2 items-center gap-4">
            <img class="w-16 shrink-0 rounded" :src="'/images/product/' + product.image" :alt="product.name" />
            <div class="flex-1 flex flex-col gap-1">
                <span class="font-bold">{{ product.name }}</span>
                <div class="flex items-center gap-2">
                    <i class="pi pi-tag text-sm"></i>
                    <span>{{ product.category }}</span>
                </div>
            </div>
            <span class="font-bold ml-8">${{ product.price }}</span>
        </div>
    </li>
</ul>
<ContextMenu ref="menu" :model="items" @hide="selectedId = null">
    <template #item="{ item, props }">
        <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="item.items" class="pi pi-angle-right ml-auto"></i>
        </a>
    </template>
</ContextMenu>

命令 #

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

  • Amy Elsner艾米·埃尔斯纳
    管理员
  • Anna Fali安娜·法利
    成员
  • Asiya Javayant阿西娅·贾瓦扬特
    成员
  • Bernardo Dominic贝尔纳多·多米尼克
    访客
  • Elwin Sharvill埃尔温·沙维尔
    成员

<ul class="m-0 list-none border border-surface rounded p-4 flex flex-col gap-2 w-full sm:w-96">
    <li
        v-for="user in users"
        :key="user.id"
        :class="['p-2 hover:bg-emphasis rounded border border-transparent transition-all duration-200 flex items-center justify-content-between', { 'border-primary': selectedUser?.id === user.id }]"
        @contextmenu="onRightClick($event, user)"
    >
        <div class="flex flex-1 items-center gap-2">
            <img :alt="user.name" :src="`https://primefaces.org/cdn/primevue/images/avatar/${user.image}`" class="w-8 h-8" />
            <span class="font-bold">{{ user.name }}</span>
        </div>
        <Tag :value="user.role" :severity="getBadge(user)" />
    </li>
</ul>
<ContextMenu ref="menu" :model="items" @hide="selectedUser = null" />
<Toast />

路由器 #

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


<span class="inline-flex items-center justify-center border-2 border-primary rounded w-16 h-16" @contextmenu="onRightClick" aria-haspopup="true">
    <svg width="35" height="40" viewBox="0 0 35 40" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="..." fill="var(--p-primary-color)" />
        <path d="..." fill="var(--p-text-color)" />
    </svg>
</span>
<ContextMenu ref="routemenu" :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>
</ContextMenu>

数据表格 #

数据表内置了对上下文菜单的支持，有关示例，请参阅 上下文菜单 演示。

可访问性 #

屏幕阅读器

上下文菜单组件使用menubar角色，并将aria-orientation设置为“vertical”，用于描述菜单的值可以通过aria-labelledby或aria-label属性提供。每个列表项都有一个menuitem角色，其中aria-label引用该项的标签，如果该项被禁用，则定义aria-disabled。上下文菜单中的子菜单使用menu角色，并定义了 aria-labelledby 作为子菜单根菜单项标签的 ID。此外，打开子菜单的菜单项具有aria-haspopup和aria-expanded，以定义项和子菜单之间的关系。

键盘支持

键功能
tab当焦点在菜单中时，关闭上下文菜单并将焦点移动到页面序列中的下一个可聚焦元素。
enter如果菜单项具有子菜单，则切换子菜单的可见性，否则激活菜单项并关闭所有打开的覆盖。
空格如果菜单项具有子菜单，则切换子菜单的可见性，否则激活菜单项并关闭所有打开的覆盖。
escape关闭上下文菜单。
向下箭头如果焦点不在菜单内并且菜单已打开，则将焦点添加到第一项。如果已聚焦某项，则将焦点移动到子菜单中的下一个菜单项。
向上箭头如果焦点不在菜单内并且菜单已打开，则将焦点添加到最后一项。如果已聚焦某项，则将焦点移动到子菜单中的下一个菜单项。
向右箭头如果存在子菜单，则打开子菜单，并将焦点移动到第一项。
向左箭头关闭子菜单并将焦点移动到已关闭子菜单的根项。
home将焦点移动到子菜单中的第一个菜单项。
end将焦点移动到子菜单中的最后一个菜单项。
任何可打印字符将焦点移动到标签以正在键入的字符开头的菜单项。
PrimeVue 4.2.5，基于 Vue 3，由 PrimeTek