1.0.0-beta • Published 3 months ago
@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 图标地址 | 是 |