Menu 菜单
导航菜单是一个网站的灵魂,用户依赖导航在各个页面中进行跳转。
基础用法
默认是侧边栏,通过x-sub-menu属性来指定子菜单,通过x-menu-item属性来指定菜单项。defaultActive属性来指定默认激活的菜单项。width属性来指定菜单的宽度吗,这个只有在侧边栏模式下才生效。index是必填且必须是唯一的属性,用来标识菜单项。
- 处理中心
- 我的工作台
- 产品
- 品牌
- 订单管理
改变模式
通过mode属性来改变菜单的模式,有horizontal、vertical模式。
- 处理中心
- 我的工作台
- 产品
- 品牌
- 订单管理
自定义标题
通过title 插槽来自定义菜单的标题。
- 处理中心
- 我的工作台
- 产品
- 品牌
- 订单管理
属性
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| defaultActive | 默认激活菜单的 index | string | — | "" |
| mode | 菜单模式 | string | horizontal / vertical | vertical |
| width | 菜单宽度 | string | — | auto |
| backgroundColor | 菜单背景色 | string | — | — |
| textColor | 菜单文字颜色 | string | — | — |
事件
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| change | 子菜单展开/收起时触发 | 当前子菜单的 index |
| toggle | 点击菜单项时触发 | 当前菜单项的 index |
| enter | 鼠标进入子菜单时触发(仅在 horizontal 模式下生效) | 当前子菜单的 index |
| leave | 鼠标离开子菜单时触发(仅在 horizontal 模式下生效) | 当前子菜单的 index |