一体化头部组件 sz-header-max

集成了Element，引入了Popover, Badge, Dropdown, DropdownItem, DropdownMenu基础组件

下载

npm i sz-header-max

引用方式

import 'sz-header-max/lib/index.css'
import SzHeaderMax from 'sz-header-max'
import Element from 'element-ui'

Vue.use(Element)
Vue.use(SzHeaderMax)

引用方式(按需引入)

// main.js

import { Badge, Dropdown, DropdownItem, DropdownMenu, Popover } from 'element-ui'
import 'sz-header-max/lib/index.css'
import SzHeaderMax from 'sz-header-max'
Vue.use(Popover).use(Badge).use(Dropdown).use(DropdownItem).use(DropdownMenu)
Vue.use(SzHeaderMax)

引用方式(主题色修改)

支持Element的主题色

// element-variables.scss

$--color-primary: #005bf5 !default;
$--color-danger: #f5222d !default;
$--color-white: #ffffff !default;

$--color-primary-light-9: mix($--color-white, $--color-primary, 90%) !default; /* ecf5ff */

/* 改变 icon 字体路径变量，必需 */
$--font-path: "~element-ui/lib/theme-chalk/fonts";

@import "~element-ui/packages/theme-chalk/src/index";
@import "~sz-header-max/lib/index.scss";

使用方式

<div id="app">
    <sz-header-max 
        title="总系统名称" 
        subTitle="子系统名称" 
        :userInfo="userInfo"
        :menuList="menuList"
        @changeMenu="changeMenu"
        @changeDept="changeDept"
        @changeRole="changeRole"
    ></sz-header-max>
</div>

组件参数

| 参数 | 说明 | 类型 | 可选值| 默认值| | --- | --- | --- | --- | --- | | title | 主系统名称 | string | - | - | | sub-title | 子系统名称 | string | - | - | | userInfo| 用户信息 | object | - | - | | menuList| 系统菜单列表 | array | - | - | | count| 消息数量 | number | - | - | | isMsg| 消息通知 | boolean | - | true | | isLogOut| 退出登录 | boolean | - | true | | ip | 跳转地址 | string | - | '' | | custom| 跳转地址(如果为true, 主标题、子标题、消息通知跳转自定义，跳转事件看下图) | boolean | - | false |

事件方法

| 方法名 | 说明 | 参数 | |----------- |-------------- | -- | | changeMenu | 点击菜单并返回当前的选中item| {} | | logOut | 退出登录| {} | | changeDept |点击部门并返回当前的选中item | （{deptCode, deptName}） | | changeRole | 点击角色并返回当前的选中item | {roleCode, roleName} | | goPortal | 主标题点击事件 | - | | goHome | 子标题点击事件 | - | | goMsg | 消息通知点击事件 | - |