1.0.13 • Published 3 years ago

yd-header v1.0.13

Weekly downloads
136
License
-
Repository
-
Last release
3 years ago

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
1.0.1-beta.79

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.12-beta.2

3 years ago

1.0.12-beta.1

3 years ago

1.0.11

3 years ago

1.0.1-beta.78

3 years ago

1.0.1-beta.77

3 years ago

1.0.1-beta.76

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.10

3 years ago

1.0.1-beta.66

3 years ago

1.0.1-beta.69

3 years ago

1.0.1-beta.67

3 years ago

1.0.1-beta.68

3 years ago

1.0.1-beta.72

3 years ago

1.0.1-beta.73

3 years ago

1.0.1-beta.70

3 years ago

1.0.1-beta.71

3 years ago

1.0.1-beta.74

3 years ago

1.0.1-beta.75

3 years ago

1.0.1-beta.65

3 years ago

1.0.1-beta.40

3 years ago

1.0.1-beta.43

3 years ago

1.0.1-beta.44

3 years ago

1.0.1-beta.41

3 years ago

1.0.1-beta.42

3 years ago

1.0.1-beta.47

3 years ago

1.0.1-beta.48

3 years ago

1.0.1-beta.45

3 years ago

1.0.1-beta.46

3 years ago

1.0.1-beta.49

3 years ago

1.0.1-beta.32

3 years ago

1.0.1-beta.33

3 years ago

1.0.1-beta.30

3 years ago

1.0.1-beta.31

3 years ago

1.0.1-beta.36

3 years ago

1.0.1-beta.37

3 years ago

1.0.1-beta.34

3 years ago

1.0.1-beta.35

3 years ago

1.0.1-beta.38

3 years ago

1.0.1-beta.39

3 years ago

1.0.1-beta.61

3 years ago

1.0.1-beta.62

3 years ago

1.0.1-beta.60

3 years ago

1.0.1-beta.63

3 years ago

1.0.1-beta.64

3 years ago

1.0.1-beta.50

3 years ago

1.0.1-beta.51

3 years ago

1.0.1-beta.54

3 years ago

1.0.1-beta.55

3 years ago

1.0.1-beta.52

3 years ago

1.0.1-beta.53

3 years ago

1.0.1-beta.58

3 years ago

1.0.1-beta.56

3 years ago

1.0.1-beta.57

3 years ago

1.0.2

3 years ago

1.0.0

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.1-beta.21

3 years ago

1.0.1-beta.22

3 years ago

1.0.1-beta.20

3 years ago

1.0.1-beta.25

3 years ago

1.0.1-beta.26

3 years ago

1.0.1-beta.23

3 years ago

1.0.1-beta.24

3 years ago

1.0.1-beta.29

3 years ago

1.0.1-beta.27

3 years ago

1.0.1-beta.28

3 years ago

1.0.1-beta.2

3 years ago

1.0.1-beta.1

3 years ago

1.0.1-beta.6

3 years ago

1.0.1-beta.4

3 years ago

1.0.1-beta.3

3 years ago

1.0.1-beta.9

3 years ago

1.0.1-beta.8

3 years ago

1.0.1-beta.7

3 years ago

1.0.1-beta.11

3 years ago

1.0.1-beta.14

3 years ago

1.0.1-beta.15

3 years ago

1.0.1-beta.12

3 years ago

1.0.1-beta.13

3 years ago

1.0.1-beta.18

3 years ago

1.0.1-beta.19

3 years ago

1.0.1-beta.16

3 years ago

1.0.1-beta.17

3 years ago

0.0.43

3 years ago

0.0.44

3 years ago

0.0.45

3 years ago

0.0.46

3 years ago

0.0.40

3 years ago

0.0.41

3 years ago

0.0.42

3 years ago

0.0.39

4 years ago

0.0.37

4 years ago

0.0.38

4 years ago

0.0.36

4 years ago

0.0.34

4 years ago

0.0.35

4 years ago

0.0.33

4 years ago

0.0.32

4 years ago

0.0.31

4 years ago

0.0.30

4 years ago

0.0.28

4 years ago

0.0.29

4 years ago

0.0.27

4 years ago

0.0.25

4 years ago

0.0.26

4 years ago

0.0.24

4 years ago

0.0.23

4 years ago

0.0.22

4 years ago

0.0.21

4 years ago

0.0.20

4 years ago

0.0.19

4 years ago

0.0.18

4 years ago

0.0.17

4 years ago

0.0.16

4 years ago

0.0.15

4 years ago

0.0.13

4 years ago

0.0.14

4 years ago

0.0.11

4 years ago

0.0.12

4 years ago

0.0.10

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago