Menu 菜单
菜单用于承载系统导航，帮助用户在页面、功能模块和配置入口之间切换。VISTA B 直接使用 Element Plus 的 el-menu，样式沿用组件库，适合后台系统顶部导航、左侧导航、模块分组和多级功能入口。
顶部栏
设置 mode="horizontal" 后，菜单会变为水平模式。通过 el-sub-menu 可以生成二级菜单。
- 工作台
- 项目管理
- 设计中心
- 订单管理
vue
<el-menu
:default-active="activeIndex"
mode="horizontal"
:ellipsis="false"
@select="handleSelect"
>
<el-menu-item index="dashboard">工作台</el-menu-item>
<el-menu-item index="project">项目管理</el-menu-item>
<el-sub-menu index="design">
<template #title>设计中心</template>
<el-menu-item index="design-layout">户型方案</el-menu-item>
<el-menu-item index="design-material">素材库</el-menu-item>
<el-menu-item index="design-render">渲染任务</el-menu-item>
</el-sub-menu>
<el-menu-item index="order">订单管理</el-menu-item>
</el-menu>顶栏布局
水平菜单可以通过菜单项的样式留出左右布局空间，常用于左侧品牌、右侧功能入口的后台顶部栏。
- HOME VISTA
- 项目
- 资产
- 账号
vue
<el-menu mode="horizontal" default-active="project" :ellipsis="false">
<el-menu-item index="brand" style="margin-right: auto;">
HOME VISTA
</el-menu-item>
<el-menu-item index="project">项目</el-menu-item>
<el-menu-item index="assets">资产</el-menu-item>
<el-sub-menu index="user">
<template #title>账号</template>
<el-menu-item index="profile">个人信息</el-menu-item>
<el-menu-item index="settings">偏好设置</el-menu-item>
</el-sub-menu>
</el-menu>侧栏
默认菜单为垂直模式。侧栏菜单适合后台系统的主导航，支持图标、分组和多级子菜单。
- 工作台
- 项目管理
- 项目阶段
- 项目列表
- 方案配置
- 交付资料
- 项目文档
- 素材资产
- 系统设置
项目列表
左侧菜单承载一级模块，展开后展示更细的业务入口。
vue
<el-menu default-active="project-list" :default-openeds="['project']">
<el-menu-item index="dashboard">
<el-icon><IconMenu /></el-icon>
<span>工作台</span>
</el-menu-item>
<el-sub-menu index="project">
<template #title>
<el-icon><Location /></el-icon>
<span>项目管理</span>
</template>
<el-menu-item-group title="项目阶段">
<el-menu-item index="project-list">项目列表</el-menu-item>
<el-menu-item index="project-plan">方案配置</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
</el-menu>折叠菜单
设置 collapse 可以折叠垂直菜单。折叠状态通常用于空间有限的后台页面，配合图标帮助用户识别入口。
- 工作台
- 项目管理
- 项目列表
- 方案配置
- 系统设置
vue
<script setup>
import { ref } from 'vue'
const isCollapse = ref(false)
</script>
<template>
<el-menu default-active="dashboard" :collapse="isCollapse">
<el-menu-item index="dashboard">
<el-icon><IconMenu /></el-icon>
<template #title>工作台</template>
</el-menu-item>
<el-sub-menu index="project">
<template #title>
<el-icon><Location /></el-icon>
<span>项目管理</span>
</template>
<el-menu-item index="project-list">项目列表</el-menu-item>
<el-menu-item index="project-plan">方案配置</el-menu-item>
</el-sub-menu>
</el-menu>
</template>自定义颜色
通过 background-color、text-color、active-text-color 可以调整菜单背景、文字颜色和激活项文字颜色。深色侧栏需要确保对比度足够。
- 工作台
- 项目管理
- 系统设置
vue
<el-menu
default-active="dashboard"
background-color="#001a26"
text-color="#c8d4d8"
active-text-color="#13aec5"
>
<el-menu-item index="dashboard">工作台</el-menu-item>
<el-menu-item index="project">项目管理</el-menu-item>
<el-menu-item index="setting">系统设置</el-menu-item>
</el-menu>弹出层偏移
子菜单弹出层默认会贴近触发项。设置 popper-offset 可以调整弹出层与菜单项的距离，横向顶部栏和折叠菜单里都可以使用。
- 项目
- 配置
vue
<el-menu mode="horizontal" default-active="1" :popper-offset="16">
<el-menu-item index="1">项目</el-menu-item>
<el-sub-menu index="2" :popper-offset="8">
<template #title>配置</template>
<el-menu-item index="2-1">基础配置</el-menu-item>
<el-menu-item index="2-2">报价规则</el-menu-item>
</el-sub-menu>
</el-menu>API
Menu 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
mode | 菜单展示模式 | horizontal / vertical | vertical |
collapse | 是否水平折叠收起菜单，仅在 vertical 模式可用 | boolean | false |
ellipsis | 水平模式下菜单是否折叠省略超出内容 | boolean | true |
ellipsis-icon | 水平折叠省略时显示的图标 | string / Component | More |
popper-offset | 弹出层偏移量 | number | 6 |
default-active | 页面加载时默认激活菜单的 index | string | 空 |
default-openeds | 默认打开的 SubMenu 的 index 数组 | string[] | 空 |
unique-opened | 是否只保持一个子菜单展开 | boolean | false |
menu-trigger | 子菜单打开触发方式，仅在 horizontal 模式可用 | hover / click | hover |
router | 是否启用 vue-router 模式，启用后会把 index 作为路由跳转路径 | boolean | false |
collapse-transition | 是否开启折叠动画 | boolean | true |
popper-effect | Tooltip 主题，内置主题为 dark / light | string | dark |
close-on-click-outside | 是否在点击外部区域后收起菜单 | boolean | false |
background-color | 菜单背景色，支持十六进制格式 | string | 空 |
text-color | 菜单文字颜色，支持十六进制格式 | string | 空 |
active-text-color | 当前激活菜单项的文字颜色，支持十六进制格式 | string | 空 |
Menu 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
select | 菜单激活回调 | (index: string, indexPath: string[], item: MenuItemClicked, routerResult?: Promise<void | NavigationFailure>) => void |
open | SubMenu 展开的回调 | (index: string, indexPath: string[]) => void |
close | SubMenu 收起的回调 | (index: string, indexPath: string[]) => void |
Menu 方法
| 方法名 | 说明 | 类型 |
|---|---|---|
open | 展开指定的 SubMenu | (index: string) => void |
close | 收起指定的 SubMenu | (index: string) => void |
handleResize | 手动触发菜单重新计算尺寸 | () => void |
Menu 插槽
| 插槽 | 说明 | 子标签 |
|---|---|---|
default | 自定义默认内容 | Menu Item / SubMenu / Menu Item Group |
SubMenu 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
index | 唯一标识 | string | 必填 |
popper-class | 弹出菜单自定义类名 | string | 空 |
show-timeout | 子菜单出现前延迟，单位毫秒 | number | 300 |
hide-timeout | 子菜单消失前延迟，单位毫秒 | number | 300 |
disabled | 是否禁用 | boolean | false |
teleported | 是否将弹出层插入到 body | boolean | undefined |
popper-offset | 弹出层偏移量，覆盖 Menu 的 popper-offset | number | undefined |
expand-close-icon | 父菜单展开且子菜单关闭时的图标 | string / Component | 空 |
expand-open-icon | 父菜单展开且子菜单打开时的图标 | string / Component | 空 |
collapse-close-icon | 父菜单收起且子菜单关闭时的图标 | string / Component | 空 |
collapse-open-icon | 父菜单收起且子菜单打开时的图标 | string / Component | 空 |
SubMenu 插槽
| 插槽 | 说明 |
|---|---|
default | 子菜单内容 |
title | 子菜单标题 |
MenuItem 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
index | 唯一标识 | string / null | null |
route | 路由跳转对象 | string / object | 空 |
disabled | 是否禁用 | boolean | false |
MenuItem 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
click | 点击菜单项时触发 | (item: MenuItemClicked) => void |
MenuItem 插槽
| 插槽 | 说明 |
|---|---|
default | 菜单项内容 |
title | 折叠菜单时显示的标题 |
MenuItemGroup 属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
title | 分组标题 | string | 空 |
MenuItemGroup 插槽
| 插槽 | 说明 |
|---|---|
default | 分组内容 |
title | 自定义分组标题 |