@glodon-gbp/header-vue3

广联达建筑业务平台（Glodon Business Platform, GBP），“工单服务”头部 SDK UI。

编译

npm run dev # 开发调试
npm run build # 编译发布

模块化

• 安装依赖

npm i @glodon-gbp/header-vue3 -S

• 引入组件

import { GbpHeader } from '@glodon-gbp/header-vue3';
import '@glodon-gbp/header-vue3/lib/index.css';

用例

<template>
  <gbp-header :accountData="state.config" :options="state.options" fixed />
</template>

<script setup>
import { reactive } from 'vue';

const state = reactive({
  config:{
    profile: {
        displayName : '用户名称',
        avatarUrl : '用户头像链接'
    },
    component: {
        count: 2
    },
    verification: {
        status: "verified"
    }
  },
  options:{
    serviceName:'服务与支持',
    serviceNameURL: '/',
    serviceNameTarget: '_self',
    entries:[
      {
        label: '文档中心',
        url: 'https://developer.glodon.com/docs',
        target:'_blank',
      },
      {
        label: '控制台',
        url: 'https://developer.glodon.com/',
        target:'_blank',
      }
    ]
  }
})
</script>

事件

| 事件 | 描述 | 必填 | 默认值 | | --------------- | -------------- | ---- | ------ | | before-sign-out | 登出前触发事件 | 否 | - |

属性

| 属性 | 描述 | 类型 | 参数范围 | 必填 | 默认值 | | ----------- | -------- | ------- | -------- | ---- | ------ | | fixed | 顶部固定 | Boolean | - | 否 | false | | zIndex | 组件层级 | Number | - | 否 | 99 | | options | 配置参数 | Object | - | 否 | - | | accountData | 用户数据 | Object | - | 是 | - |

Options

| 属性 | 描述 | 类型 | 参数范围 | 必填 | 默认值 | | ----------------- | ------------ | ------ | -------------------------------------- | ---- | ------- | | serviceName | 服务名称 | String | - | 否 | - | | serviceNameURL | 服务名称链接 | String | - | 否 | - | | serviceNameTarget | 链接打开方式 | String | _blank 、_self 、_parent 、_top | 否 | _self | | entries | 控制台入口 | Array | - | 否 | - | | entries.label | 入口名称 | String | - | 否 | - | | entries.url | 入口链接 | String | - | 否 | - | | entries.target | 链接打开方式 | String | _blank 、_self 、_parent 、_top 、 | - | _blank |

Account Data

| 属性 | 描述 | 类型 | 参数范围 | 必填 | 默认值 | | ------------------- | ---------------- | ------ | -------- | ---- | ------ | | verification.status | 开放平台审核状态 | String | verified | 是 | - | | component.count | 用户上架的组件数 | Number | - | 是 | 0 | | profile.displayName | 用户名称 | String | - | 是 | '' | | profile.avatarUrl | 用户头像链接 | String | - | 是 | '' |

服务配置项

| 属性 | 描述 | 必填 | | --------------------- | -------------------- | ---- | | VITE_URL_UC_INFO | 用户中心链接 | 是 | | VITE_URL_GBP_SDK_HOME | 点击 Logo 时跳转链接 | 是 | | VITE_URL_GBP_SDK_LOGO | Logo 图标地址 | 是 |