@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 图标地址	是