Vue MegaMenu 組件 - 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	將焦點移至子選單中的最後一個選單項目。
任何可列印的字元	將焦點移至標籤以鍵入的字元開頭的選單項目。

大型選單