Menu 導覽選單

站點 / 應用主導覽。水平 / 垂直兩種佈局，支援子選單、分組、折疊條與手風琴。

導覽選單

<template>
  <div class="demo-col" style="max-width: 640px; gap: 20px">
    <p class="demo-note">horizontal 水平模式</p>
    <LhMenu v-model="active" mode="horizontal">
      <LhMenuItem index="home">首頁</LhMenuItem>
      <LhSubMenu index="song" title="宋代繪畫">
        <LhMenuItem index="fan">范寬</LhMenuItem>
        <LhMenuItem index="guo">郭熙</LhMenuItem>
      </LhSubMenu>
      <LhMenuItem index="yuan" disabled>元代（停用）</LhMenuItem>
    </LhMenu>
    <p class="demo-note">選中：{{ active }}</p>
    <p class="demo-note">vertical 垂直模式 + 手風琴（uniqueOpened）+ 分組</p>
    <LhMenu
      v-model="active2"
      mode="vertical"
      :collapse="collapsed"
      unique-opened
      :default-openeds="['g1']"
      style="width: 220px"
    >
      <LhSubMenu index="g1" title="山水卷">
        <LhMenuItemGroup title="北宋">
          <LhMenuItem index="fan2">范寬</LhMenuItem>
          <LhMenuItem index="guo2">郭熙</LhMenuItem>
        </LhMenuItemGroup>
        <LhMenuItemGroup title="南宋">
          <LhMenuItem index="li">李唐</LhMenuItem>
        </LhMenuItemGroup>
      </LhSubMenu>
      <LhMenuItem index="yuan2">元代繪畫</LhMenuItem>
    </LhMenu>
    <LhButton size="small" @click="collapsed = !collapsed">{{ collapsed ? '展開' : '折疊' }}（collapse）</LhButton>
  </div>
</template>

<script>
export default {
  data: () => ({
    active: 'home',
    active2: 'fan2',
    collapsed: false,
  }),
}
</script>

Menu Props

屬性	說明	類型	預設值
v-model	當前啟用項（受控 modelValue；未傳時元件內部維護）	string	—
mode	佈局模式	'horizontal' \| 'vertical'	'horizontal'
collapse	垂直模式折疊為圖示條（子選單改為飛出面板）	boolean	false
defaultOpeneds	預設展開的子選單鍵（非受控）	string[]	—
openeds	受控展開的子選單鍵	string[]	—
uniqueOpened	手風琴：同時只展開一個子選單	boolean	false
sx	sx 快速佈局屬性	—	—

MenuItem Props

屬性	說明	類型	預設值
index	唯一標識（必填）	string	—
disabled	是否停用	boolean	false
sx	sx 快速佈局屬性	—	—

SubMenu Props

屬性	說明	類型	預設值
index	唯一標識（必填）	string	—
title	標題（也可用 title 插槽）	string	—
disabled	是否停用	boolean	false
sx	sx 快速佈局屬性	—	—

MenuItemGroup Props

屬性	說明	類型	預設值
title	分組標題（也可用 title 插槽）	string	—
sx	sx 快速佈局屬性	—	—

Slots

插槽	說明
SubMenu title	子選單標題
SubMenu default	子選單內容（放 MenuItem / MenuItemGroup）
MenuItemGroup title	分組標題
MenuItemGroup default	分組內選單項