Menu 菜单组件

Element Plus Menu Documentation

Hidden Title

基础用法：<SMenu v-model="active" :header="header" :options="menus" />

属性事件插槽简介

基础用法（`defaultOpenAll` 默认值 `true`）

成华主题（`theme` 默认值 `default`）

石景山主题（`theme` 默认值 `default`）

浅色分组菜单（`variant` 默认值 `dark`）

sybz 主题（theme 默认值：default）

设置 theme="sybz" 使用思云博智配色。theme 可选 default / chenghua / shijingshan / sybz，默认值为 default。品牌蓝 #4876EF，AI 辅助绿 #00D3AB。

API

属性名	说明	类型	可选值	默认值
`modelValue`	当前激活菜单的 index/path	string	-	`''`
`options`	菜单配置，children 可循环嵌套	`SMenuItem[]`	-	`[]`
`fieldNames`	自定义数据字段名	`SMenuFieldNames`	-	`{}`
`router`	点击菜单时启用 Vue Router 跳转	boolean	`true / false`	`true`
`defaultOpenAll`	默认展开所有含 children 的菜单	boolean	`true / false`	`true`
`defaultOpeneds`	额外指定默认展开项	string[]	-	`[]`
`width`	菜单宽度，数字按 px 处理	string / number	-	`256`
`height`	菜单高度，数字按 px 处理	string / number	-	`100%`
`backgroundColor`	背景色	string	CSS 颜色	`#1d293b`
`textColor`	文字颜色	string	CSS 颜色	`#cbd5e1`
`activeTextColor`	激活文字颜色	string	CSS 颜色	`#ffffff`
`collapse`	是否折叠菜单	boolean	`true / false`	`false`
`variant`	菜单外观	string	`dark / light`	`dark`
`theme`	主题样式	string	`default / chenghua / shijingshan / sybz`	`default`
`header`	内置头部配置，传入标题和图标即应用默认样式	`SMenuHeaderConfig`	-	`undefined`
`headerConfig`	`header` 的兼容属性，已废弃	`SMenuHeaderConfig`	-	`undefined`
`actionConfig`	内置主操作按钮配置，支持文字和图标	`SMenuActionConfig`	-	`undefined`
`footerConfig`	内置底部账号配置，支持标题、副标题和头像文字	`SMenuFooterConfig`	-	`undefined`

SMenuItem 默认字段为 index / path / title / icon / children / disabled / route。index 优先于 path；icon / suffixIcon 可传 Element Plus 图标名称字符串或 Vue 图标组件。type="group" 用于分组标题；tag / tagColor 用于菜单标签；detail 配置 tag / title / description 后，鼠标移入会显示详情卡片。其余 Element Plus Menu 属性和事件会透传。

事件

事件名	说明	参数
`update:modelValue`	选择菜单后更新激活值	`(index: string)`
`select`	选择菜单时触发，参数与 Element Plus 一致	`(index, indexPath, item, routerResult)`
`actionClick`	点击内置主操作按钮时触发	`(event: MouseEvent)`

插槽

插槽名	说明
`header`	菜单顶部品牌或自定义内容
`footer`	菜单底部操作或自定义内容

Menu 菜单组件 ​

Hidden Title ​

属性事件插槽简介 ​

基础用法（defaultOpenAll 默认值 true） ​

成华主题（theme 默认值 default） ​

石景山主题（theme 默认值 default） ​

浅色分组菜单（variant 默认值 dark） ​

sybz 主题（theme 默认值：default） ​

API ​

事件 ​

插槽 ​