yd-header
Build Setup
# 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 and docs for vue-loader.
使用说明
yd-header中包含 YdHeader YdSidebar YdHeader: 头部组件,原先的menu-list属性不需要了,改为组件内部请求菜单数据,详见组件说明 YdSidebar: 侧边栏组件,数据有头部传递出来,详见组件说明
安装
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