內容選單

ContextMenu 會顯示一個覆蓋選單，以顯示與元素相關的動作。

匯入 # 


import ContextMenu from 'primevue/contextmenu';

基本 #

ContextMenu 需要 menuitems 的集合作為其 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" />

範本 #

ContextMenu 提供使用 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 ElsnerAmy Elsner
    管理員
  • Anna FaliAnna Fali
    成員
  • Asiya JavayantAsiya Javayant
    成員
  • Bernardo DominicBernardo Dominic
    訪客
  • Elwin SharvillElwin 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>

資料表格 #

DataTable 內建支援 ContextMenu，如需範例，請參閱ContextMenu 示範。

無障礙功能 #

螢幕閱讀器

ContextMenu 組件會使用 menubar 角色，並將 aria-orientation 設定為「垂直」，而用來描述選單的值可以使用 aria-labelledby 或 aria-label props 提供。每個清單項目都有 menuitem 角色，且 aria-label 參考項目的標籤，而如果項目已停用，則會定義 aria-disabled。ContextMenu 內的子選單會使用 menu 角色，並定義 aria-labelledby 作為子選單根目錄 menuitem 標籤的 ID。此外，開啟子選單的 menuitem 會有 aria-haspopup 和 aria-expanded，以定義項目和子選單之間的關係。

鍵盤支援

按鍵功能
tab當焦點在選單中時，會關閉內容選單，並將焦點移至頁面序列中的下一個可聚焦元素。
enter如果 menuitem 有子選單，則會切換子選單的顯示/隱藏，否則會啟動 menuitem 並關閉所有開啟的覆蓋層。
space如果 menuitem 有子選單，則會切換子選單的顯示/隱藏，否則會啟動 menuitem 並關閉所有開啟的覆蓋層。
escape關閉內容選單。
向下箭頭如果焦點不在選單內且選單已開啟，則會將焦點新增至第一個項目。如果已聚焦某個項目，則會將焦點移至子選單內的下一個 menuitem。
向上箭頭如果焦點不在選單內且選單已開啟，則會將焦點新增至最後一個項目。如果已聚焦某個項目，則會將焦點移至子選單內的下一個 menuitem。
向右箭頭如果有的話，會開啟子選單，並將焦點移至第一個項目。
向左箭頭關閉子選單，並將焦點移至關閉子選單的根目錄項目。
home將焦點移至子選單內的第一個 menuitem。
end將焦點移至子選單內的最後一個 menuitem。
任何可列印的字元將焦點移至標籤以輸入的字元開頭的 menuitem。
PrimeVue 4.2.5 在 Vue 3 上，由PrimeTek