js-hs-base

引入文件

<jsheader
  :seachOption="['选项1' ,'选项2']"
  :spaceTitle="'头部组件'"
  :searchUrl="searchUrl"
  @logout="logout"
  @toNewsDetail="toNewsDetail"
  @conflict="conflict"
>
  <!-- ... -->
  <span slot="spaceTitle">我是插槽</span>
  <span slot="worktableReplace">我是插槽2</span>
  <span slot="endSlot">我是插槽3</span>
</jsheader>
<jsfooter />
<script>
  import base from "js-hs-base";
  import "js-hs-base/js-base/js-base.css";
  Vue.use(base);
  export default {
    methods: {
      logout(e) {
        // do something
      },
      toNewsDetail(e) {
        e; // { id, messageType, parmes } 消息id 消息类型 消息参数信息
      },
      conflict() {
        // 清除缓存等操作
      },
    },
  };
</script>

注意事项

1. 发布版本时请注意 header、footer 组件的 version 参数

2. 点击退出登录，继续登录后跳转地址为 logoutUrl 参数

3. 退出参数 clientId 请咨询后台

4. 用户被挤掉线时，弹窗关闭会触发 conflict 事件，建议在事件内进行清除缓存等操作

5. 本地开发时，如果需要头部正常显示，获取到用户信息，version 传参可改为 local

6. 头部默认为同步加载，将先获取头部信息并阻塞 js 进程 ，如不需要传 isAsync = true

header

参数

| 参数 | 说明 | 类型 | 默认值 | | :-----------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------: | :-----------------------------------------------------------------: | | spaceTitle | 头部标题 | String \| slot | | | worktableReplace | 新增的插槽，在工作台旁边 | slot | | | isShowSearch | 是否显示搜索框 | Boolean | true | | searchOption | 搜索框下拉列表 | Array | [{name: '用户', value: 'person'}, {name: '空间', value: 'space'}] | | searchOpenNewWindow | 搜索時是否打開新窗口 | Boolean | false | | logoutUrl | 退出后继续登录跳转地址. 详见寰烁统一认证平台 OAuth 接入文档---2.5 主动退出 | String | http://pls.hseduyun.net | | clientId | 退出参数 clientId | String \| Number | demo | | isShowWork | 是否显示工作台入口 | Boolean | true | | isShowNews | 是否显示消息铃铛 | Boolean | true | | swichRoleUrl | 切换角色后跳转地址 | String | 默认当前页面地址 | | userAvatar | 用户头像 | String | | | reLogin | 是否开启自动校验登录状态功能，异常状态将执行点击退出登录事件 | Boolean | false | | version | 环境变量test:测试域名demo:演示域名formal:正式域名 local: 本地开发模式 | String | test | | LoginBtn | 校检登录失败时 是否显示登录按钮和点击登录时事件 { isShow: true, clickAutoToLogin: true },isShow 为 true 将显示登录按钮,clickAutoToLogin 为 true 点击登录会自动跳转到登录页。点击登录时触发 login 事件 | object | { isShow: true, clickAutoToLogin: true } | | conflictUrl | 用户被挤掉线后继续登录跳转地址 | String | 默认为当前页面地址 | | protocol | 压测时切换 http、http 用 | String | https | | workTableUrl | 工作台跳转链接 | String | 先 passport 验证再回工作台 | | endSlot | 新增插槽，在最后面 | slot | | | isHideBG | 是否隐藏头部背景 | Boolean | false | | opacityBG | 头部白条背景透明度 | String \| Number | .6 | | isAsync | 头部是否为异步加载 false 将先获取头部信息并阻塞 js 进程 | Boolean | false | | isPostUserMes | 是否关闭埋点 | Boolean | true | | isShowSearch | 是否显示搜索框 | Boolean | true | | urlConfig | 增加小型化并增加自行配置参数 pls_fr: '个人空间前端域名', pls_bk: '个人空间后端域名', nc_fr: '消息中心前端', ph_fr: '个人主页前端', passport: 'passport', plsClientId: '个人空间前端 clientid', wss: 'wss', | Boolean | true |

事件

| 事件名称 | 说明 | 回调参数 | | :----------: | :----------------------: | :---------------------------------: | | toNewsDetail | 点击铃铛内消息触发 | Function (id, messageType, item ) | | logout | 点击退出账号触发 | Function | | login | 点击登录触发 | Function | | roleSwitch | 点击切换角色触发 | Function | | conflict | 用户被挤掉线关闭弹窗触发 | Function |

footer

参数

| 参数 | 说明 | 类型 | 默认值 | | :------: | :-------------------------------------------------------------------------------------------------------: | :------: | :----: | | tenantId | 租戶 id | String | | | version | 环境变量test:测试域名demo:演示域名formal:正式域名 local: 本地开发模式 xx: 小型化部署 | String | test |

版本更新日志

版本 v0.3.63

1. 省平台