pes-cloud

安装

yarn add pes-cloud -S

import cloud from 'pes-cloud'

Vue.use(cloud)

组件内
  <pes-cloud 
    :menu-title="menuTitle"
    :menu-list="menuList"
    :user-info="userInfo"
    :cloud-router="$router"
    :cloud-route="$route"
    @logout="logout"
    :hideHeader="false"
    :hideAside="false"
    :hideTabs="false"
    :hidePadding="false"
    :locale="locale"
    :nav-menu-list="navMenuList"
    :nav-avatar-list="navAvatarList"
    :management-list="managementList"
    @pwdChange="pwdChange"
  >
    <div slot="header">
      // 自定义头部
    </div>
    <div slot="dropItem">
      // 自定义用户下拉项
    </div>
    <div>
      <router-view></router-view>
    </div>
  </pes-cloud>

使用

放在app.vue下

header

一部分是固定内容 一部分可以自定义

main

主内容

参数

参数名	说明	类型	默认值
menu-title	需要展示菜单的根菜单名称	Object	{ name: String, icon: String, routerName: String }
menu-list	直接导入菜单list	Array	[]
user-info	用户基本信息	Object	{name: String}
cloud-router	当前$router	Object	必传
cloud-route	当前$route	Object	必传
logout	退出登录事件	Function	事件
hidePadding	是否隐藏padding	Boolean	false
hideHeader	是否隐藏头部	Boolean	false
hideAside	是否隐藏侧边菜单	Boolean	false
hideTabs	是否隐藏页签	Boolean	false
locale	语言选择	String	'zh'(可选值:'en')
nav-menu-list	头部菜单列表	Array	['management', 'application', 'help']
nav-avatar-list	头部用户下拉列表	Array	['pwdChange', 'logout']
management-list	头部管理下拉列表	Array	[] (eg:[{ name: '组织管理', url: '/#/system/department' }])
pwdChange	修改密码事件	Function	事件 (event:{password: '',newPassword: '',confirmPassword: ''})