主题
Menu 菜单
使用
import { KMenu } from "@ksware/ksw-ux";为网站提供导航功能的菜单。
顶栏
顶部栏菜单可以在各种场景中使用。
导航菜单默认为垂直模式，通过将 mode 属性设置为 horizontal 来使导航菜单变更为水平模式。 另外，在菜单中通过 sub-menu 组件可以生成二级菜单。 Menu 还提供了background-color、text-color和active-text-color，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。
左右
您可以将菜单项放置在左边或右边。
侧栏
垂直菜单，可内嵌子菜单。
通过 k-menu-item-group 组件可以实现菜单进行分组，分组名可以通过 title 属性直接设定，也可以通过具名 slot 来设定。
Collapse 折叠面板
垂直导航菜单可以被折叠
弹出层偏移量
当提供了 popperOffset 配置，会覆盖 Submenu 的 popper-offset.
Menu API
Menu Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| index | 唯一标志 | string | null | - |
| route | Vue Router 路径对象 | object | — |
| disabled | 是否禁用 | boolean | false |
Menu Events
| 事件名 | 描述 | 类型 |
|---|---|---|
| select | 菜单激活回调 | Function |
| open | sub-menu 展开的回调 | Function |
| close | sub-menu 收起的回调 | Function |
Menu Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | 自定义默认内容 | - |
Menu Methods
| 方法名 | 描述 | 类型 |
|---|---|---|
| open | 打开一个特定的子菜单，参数是要打开的子菜单的索引 | method |
| close | 关闭一个特定的子菜单，参数是要关闭子菜单的索引 | method |
| handleResize | 手动触发菜单宽度重新计算 | method |
SubMenu API
SubMenu Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| index | 唯一标志 | string | - |
| popper-class | 为 popper 添加类名 | string | - |
| show-timeout | 子菜单出现之前的延迟，(继承 menu 的 show-timeout 配置) | number | - |
| hide-timeout | 子菜单消失之前的延迟，(继承 menu 的 hide-timeout 配置) | number | - |
| disabled | 是否禁用 | boolean | false |
| popper-append-to-body | （已废弃）是否将弹出菜单插入至 body 元素。在菜单的定位出现问题时，可尝试修改该属性 | boolean | 一级子菜单：true / 非一级子菜单：false |
| teleported | 是否将 popup 的下拉列表插入至 body 元素 | boolean | 一级子菜单：true / 非一级子菜单：false |
| popper-offset | 弹出窗口的偏移量 (覆盖 popper的菜单) | number | - |
| expand-close-icon | 父菜单展开且子菜单关闭时的图标，expand-close-icon 和 expand-open-icon 需要一起配置才能生效 | string | Component | - |
| expand-open-icon | 父菜单展开且子菜单打开时的图标，expand-open-icon 和 expand-close-icon 需要一起配置才能生效 | string | Component | - |
| collapse-close-icon | 父菜单收起且子菜单关闭时的图标，expand-close-icon 和 expand-open-icon 需要一起配置才能生效 | string | Component | - |
| collapse-open-icon | 父菜单收起且子菜单打开时的图标，expand-open-icon 和 expand-close-icon 需要一起配置才能生效 | string | Component | - |
SubMenu Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | 自定义默认内容 | - |
| title | 自定义标题内容 | - |
MenuItem API
MenuItem Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| index | 唯一标志 | string | null | - |
| route | Vue Router 路径对象 | object | - |
| disabled | 是否禁用 | boolean | false |
MenuItem Events
| 事件名 | 描述 | 类型 |
|---|---|---|
| click | 菜单点击时的回调函数 | Function |
MenuItem Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | 自定义默认内容 | - |
| title | 自定义标题内容 | - |
MenuItemGroup API
MenuItemGroup Props
| 参数名 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| title | 组标题 | string | - |
MenuItemGroup Slots
| 插槽名 | 描述 | 参数 |
|---|---|---|
| default | 默认默认内容 | - |
| title | 自定义组标题内容 | - |