@wallejs/hanclouds-console-header

控制台头部导航栏

Usage no npm install needed!

<script type="module">
  import wallejsHancloudsConsoleHeader from 'https://cdn.skypack.dev/@wallejs/hanclouds-console-header';
</script>

README

说明

Copyright © 2020 hanclouds all rights reserved

使用技术

  • Vue
  • Vue-Router
  • Element UI
  • npm

配置参数

Attributes

参数 类型 说明
config Object 组件全局配置对象
headPicture String 头像连接地址
nickName String 昵称

config配置

参数 类型 说明
logoHref String logo链接地址
logoMethod String logo自定义事件名称
title String 主标题(不填默认控制台)
titleHref String 主标题跳转地址
titleMethod String 主标题自定义点击事件名称
subTitle String 副标题
subTitleHref String 副标题跳转地址
subTitleMethod String 副标题自定义点击事件名称
menus Array 右侧菜单列表(menus配置见下文)
userDropdownList Array 用户头像下拉列表(配置见下文)
#### menus配置
参数 类型 说明
--- --- ---
title String 名称
url String 导航地址
method String 自定义点击事件名称
children Array 子菜单(已下拉列表形式展示，参数同menus)

userDropdownList配置

参数 类型 说明
title String 名称
icon String 图标
url String 导航地址
disables Boolean 禁用与否
divided Boolean 是否又分割线
method String 自定义点击事件名称

Events

事件 说明
handleNav 左上角红方块点击事件
--- 自定义事件与菜单自定义method对应

备注

1， 配置所有的导航路径均可配置路径也可配置完整url 2， 定义了自定义点击事件method则不执行路径跳转，自定义事件定义是除了配置method，需在组件上手动写同名事件