yd-header
Version:
> yd-header
151 lines (126 loc) • 6.6 kB
Markdown
> yd-header
## Build Setup
``` bash
# install dependencies
npm install
# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report
```
For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
使用说明
yd-header中包含 YdHeader YdSidebar
YdHeader: 头部组件，原先的menu-list属性不需要了，改为组件内部请求菜单数据，详见组件说明
YdSidebar: 侧边栏组件，数据有头部传递出来，详见组件说明
```bash
安装
npm i yd-header --save 或者yarn add yd-header
使用
1.[*.entry.js]
例（'menuComp'名字可以任意命名）：
import menuComp from 'yd-header'
Vue.use(menuComp)
2.[*.vue]
- YdHeader组件说明
<yd-header
:active-menu=""
:active-tenant=""
:tenant-list=""
:user-name=""
:email=""
:over-view-url=""
:has-overview-url=""
:page-level=""
:system-id=""
:help-doc-url=""
@logout=""
@changeTenant=""
@notInMenuList=""
@on-header-menu=""
@on-page-two-menu=""
@on-all-menu=""
></yd-header>
| 参数 | 说明 | 类型 | 可选值 |
| --------- | ---------- | ------ | ----------------------------------------- |
| name | 系统名称 | String | 默认值:云道平台 |
| activeMenu | 当前选中菜单，必填 | String | 传各中心对应的菜单名称 |
| tenantList | 租户列表，必填 | Array | 例子:[{tenantCode: 1,tenantName: '租户A' }] |
| activeTenant | 当前租户，必填 | String,Number | 对应tenantList中的tenantCode |
| userName | 当前用户名，必填 | String |
| email | 当前用户邮箱，必填 | String | |
| overViewUrl | 总览地址,必填（需要根据当前环境动态配置） | String | 例子: http://10.128.22.189:31166 |
| hasOverviewUrl | 若不传overViewUrl时必填为false | Boolean | 默认true，有传overViewUrl属性；false为没有传overViewUrl属性 |
| loopTime | 公告轮询时间 | Number | 默认为10，单位为分钟 |
| pageLevel | 当前页面层级 | Number | 默认为工作台所在页面为1级页，值为 1，目前有1和2 |
| systemId | 系统id，有系统ID时必填，切换系统要传 | String,Number | 用户选择系统 |
| helpDocUrl | 帮助文档地址，必填 | String | 例子：http://10.128.22.189:30098/user/_book/faq/faq.html | |
事件
| 事件名称 | 说明 | 回调参数 |
| ------------- | ------------------------ | ------------------------------------------------ |
| changeTenant | 切换租户 | tenantCode: 对应tenantList中的tenantCode |
| notInMenuList | 当前的菜单不在菜单列表中 | (menuName,tenantCode) 当前的菜单名称, 当前的租户 |
| logout | 退出回调事件 | 无 |
| on-header-menu | 接收当前头部菜单项对应的侧边栏菜单数据 | 是一个json对象：{ menuList: [], activeMenuName: '' }；其中 menuList: 当前头部菜单项对应的侧边栏菜单数据，activeMenuName：选中的头部菜单名称 |
| on-page-two-menu | 当处于一级页面时，接收所有二级页面的菜单数据 | menuList: 所有二级页面的菜单数据 |
| on-all-menu | 接收所有菜单数据 | menuList: 收所有菜单数据 |
- YdSidebar组件说明
<yd-sidebar
:active-header-menu=""
:menu-list=""
:no-side-bar=""
:is-full-path=""
:active-tenant=""
:system-id=""
@handle-select-sidebar=""
@handle-toggle-sidebar=""
:tran-route-func=""
></yd-sidebar>
| 参数 | 说明 | 类型 | 可选值 |
| --------- | ---------- | ------ | ----------------------------------------- |
| activeHeaderMenu | 当前头部菜单选中的菜单名称，必填 | String | 头部菜单选中的菜单名称，与YdHead组件中的activeMenu同值 |
| menuList | 侧边栏菜单（可通过头部事件on-header-menu获取menuList属性值），必填，根据本中心需求，自行判断是否对menuUrl进行截取路径处理，如若截取，则isFullPath属性必传，详见isFullPath介绍 | Array | 侧边栏菜单数据 |
| noSideBar | 侧边菜单栏是否显示 | Boolean | 默认为显示false |
| isFullPath | 是否对侧边菜单栏数据中的menuUrl进行处理截取路径部分，该属性用来标识处理过的菜单数据中的menuUrl是否是全路径 | Boolean | 默认为显示全路径true；true则显示全路径，例如：http://127.0.0.1:8080/home；false则不显示IP端口，例如：/home |
| activeTenant | 当前租户，必填 | String,Number | 对应tenantList中的tenantCode |
| systemId | 系统id，有系统ID时必填，切换系统要传 | String,Number | 用户选择系统 |
| tran-route-func | 路由转换函数，path参数为跳转路由地址（如果isFullPath为true，该路由地址就为全路径？之前的所有内容），返回其对应左边菜单对应的路由地址，需要时才传参 | Function | 用于页面触发路由跳转时，能选中对应左边菜单，例如 tranRouteFunc(path){ return path;}
事件
| 事件名称 | 说明 | 回调参数 |
| ------------- | ------------------------ | ------------------------------------------------ |
| handle-select-sidebar | 侧边栏切换事件 | menuName: 当前点击菜单项的菜单名称 |
| handle-toggle-sidebar | 侧边栏收缩展示值获取事件 | collapse: 侧边栏是收缩还是展开 |
3. 布局及样式代码参考（非完整代码，仅供参考，结合实际调整）
<template>
<div class="app-wrapper">
<yd-header></yd-header>
<div class="main-wrapper">
<yd-sidebar></yd-sidebar>
<div class="main-container"></div>
</div>
</div>
</template>
<style>
.app-wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
.main-wrapper {
height: calc(100% - 50px);
display: flex;
width: 100%;
}
.main-container {
flex: 1;
height: 100%;
overflow: auto;
}
</style>
4. url参数说明：
systemId 系统id
tenantCode 租户
sidebarMenuId 当前选中侧边栏菜单id
```