fuxin-header-isart-thinkgs v0.2.5

本npm包作用 统一各个系统顶部菜单样式 适应keycloak单点登录

组件使用

<template>
  <div id="app">
    <fuxinHeader :avatar="avatar" :topMenuList="topMenuList" :username="username" id-token="XXX" menuId="1"/>
  </div>
</template>

参数

data() {
    return {
      avatar: require('/src/assets/logo.png'),
      username: 'XXX',
      topMenuList: [
        {
          'name': '工作台',
          id: '0',
          icon: require('/src/assets/navbar/index.png'),
          src: 'http://mhweb.isart.me'
        },
        {
          'name': '精准招商',
          id: '1',
          icon: require('/src/assets/navbar/jingzhun@2x.png'),
          src: 'http://zhaoshangweb.isart.me'
        },
        {
          'name': '智慧办公',
          id: '2',
          icon: require('/src/assets/navbar/zhihui@2x.png'),
          src: 'http://39.105.145.19:9103'
        },
        {'name': '项目动态监管', id: '3', icon: require('/src/assets/navbar/dongtai@2x.png'), src: false},
        {
          'name': '环保监测',
          id: '4',
          icon: require('/src/assets/navbar/huanbao@2x.png'),
          src: 'http://main.fxcyy.isart.me'
        },
        {'name': 'AI视频分析', id: '5', icon: require('/src/assets/navbar/ai@2x.png'), src: false},
        {
          'name': '安全生产',
          id: '6',
          icon: require('/src/assets/navbar/anquan@2x.png'),
          src: 'http://aqscweb.isart.me'
        },
        {
          'name': '疫情防护',
          id: '7',
          icon: require('/src/assets/navbar/yiqing@2x.png'),
          src: 'http://yqfkweb.isart.me'
        }
      ],
    }
  }

参数含义

avatar:      头像
username:    用户名
topMenuList: 头部菜单数组(从门户接口中获得)   非不传  不传就是默认
id-token:    keycloak登录时获得的id-token   用于退出登录
menuId:      当前系统id(后续可能改为常量)

接入准备

1  npm install fuxin-header-isart

2  main.js 全局引入 
import fuxinHeaderIsart from 'fuxin-header-isart'
Vue.use(fuxinHeaderIsart)

3  布局文件(一般为layout)  调整整体业务高度  顶部header 目前是固定高度100px  也就是整体要下沉100px;

如有疑问 请联系佟子青