[email protected]

菜单 支持配置项：横向、纵向、折叠、自定义样式。

横向向菜单

纵向菜单

自定义样式

动态修改组件属性

安装

npm 安装

推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i @ths-base/menu
yarn add @ths-base/menu

使用

import TMenu from '@ths-base/menu'
import '@ths-base/menu/lib/index.css'
createApp(App).use(TMenu)

CDN

由于公司暂时没有提供可以使用的 CDN 地址，所以目前可以在制品库中找到对应资源，下载安装包，使用 umd 包，在页面上引入 js 和 css 文件即可开始使用。 制品库地址：http://192.168.0.112:8081/#browse/browse:npm-vue-components

<!-- 引入vue框架 -->
<script src="https://unpkg.com/vue@next"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="lib/index.css">
<!-- 引入组件库 -->
<script src="lib/index.js"></script>

使用

Vue.createApp().use(TMenu)

Menu 属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本号 | | ------------- | ----------------------- | ------- | ------------------------------------------------------------------------------ | ---------- | ------ | | width | 菜单宽度 | Number | — | 200 | 2.0 | | mode | 模式 | String | horizontal-水平 | vertical-垂直 | horizontal | 2.0 | | defaultActive | 当前选中项 | String | — | — | 2.0 | | activeMenus | 选中项数组 | Array | string[] 如果默认选中项为子菜单中的某一项，则需要此属性 数组为选中的菜单项集合 | — | 2.0 | | themeStyle | 主题风格 | String | light-浅色 | dark-深色 | light | 2.0 | | menuStyle | 菜单风格样式 | String | line-下划线 | surface-背景色 | line | 2.0 | | menuLayout | 图标文字排列方向 | String | horizontal-水平 | vertical-垂直 | vertical | 2.0 | | showIcon | 是否显示图标 | Boolean | | true | 2.0 | | collapsible | 纵向菜单 是否可以折叠 | Boolean | — | true | 2.0 | | folded | 纵向菜单 折叠状态 | Boolean | — | false | 2.0 | | borderLine | 纵向菜单 是否显示下划线 | Boolean | — | true | 2.0 | | c-style | 自定义样式 | object | -- | -- | 2.0 |

c-style 的属性

| 参数 | 允许接收的状态 | 说明 | | ---------------- | ---------------- | -------- | | wrapper | default | 容器 | | menu | default / active | 菜单 | | menuItem | default / active | 菜单项 | | icon | default / active | 图标 | | submenu | default / active | 子菜单 | | submenuItem | default / active | 子菜单项 | | borderBottomLine | default | 下边线 |

MenuItem 属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本号 | | ----- | ----------------------------------- | ------------- | ------ | ------ | ------ | | index | 唯一标志 | String/number | — | — | 2.0 | | icon | 图标名称 font-awesome 图标库 | String | — | — | 2.0 | | path | 路径 | String | — | — | 2.0 | | route | 传入当前项路径对象 选中菜单事件传出 | Object | — | — | 2.0 |

Submenu 属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本号 | | --------- | ---------------------------- | ------------- | ------ | ------ | ------ | | index | 唯一标志 | String/number | — | — | 2.0 | | icon | 图标名称 font-awesome 图标库 | String | — | — | 2.0 | | showArrow | 是否显示图标 | Boolean | — | true | 2.0 |

SubmenuItem 属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 版本号 | | ----- | ----------------------------------- | ------------- | ------ | ------ | ------ | | index | 唯一标志 | String/number | — | — | 2.0 | | icon | 图标名称 font-awesome 图标库 | String | — | — | 2.0 | | path | 路径 | String | — | — | 2.0 | | route | 传入当前项路径对象 选中菜单事件传出 | Object | — | — | 2.0 |

颜色变量使用说明

| 颜色变量 | 说明 | |------------------------------| -------------------------------------------------------------------- | | --theme-color | 主题色 默认的菜单高亮颜色均为主题色 | | --theme-color-opacity-15 | 纵向菜单项及子菜单项选中的背景色 | | --t-font-color1 | 菜单项文本默认颜色、子菜单项文本默认颜色 | | --t-font-color1-opacity-50 | 菜单项中图标默认颜色、子菜单项中图标默认颜色 | | --t-font-color4 | 纵向菜单折叠按钮图标默认颜色 | | --t-border-color3 | 纵向菜单下边线条颜色、纵向子菜单展开的背景色、横向子菜单选中的背景色 | | --t-border-bottom-color | 横向菜单&线条模式&选中菜单下边线的颜色 | | --t-background-color | 子菜单默认背景色 | | --t-surface-background-color | 横向菜单选中菜单项的背景颜色 |

Menu事件

| 事件名称 | 说明 | 回调参数 | |--------| -------------------- |-----------------------| | select | 点击菜单事件 | obj: { index: string | number; [item]<any 传入的选项> } | | fold | 点击折叠菜单按钮事件 | boolean |

作者：张金秀