Glodon Open Header

OPEN 提供控制台头部导航，供 PC 引用，保持统一的设计风格。

模块化

• 安装依赖

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

• 引入组件

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

用例

<template>
  <gld-open-header :accountData="state.config" consoleName="控制台" />
</template>

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

const state = reactive({
  config:{
    profile: {
        displayName : '用户名称',
        avatarUrl : '用户头像链接'
    },
    component: {
        count: 2
    },
    verification: {
        status: "verified"
    }
  }
})
</script>

事件

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

属性

| 属性 | 描述 | 类型 | 参数范围 | 必填 | 默认值 | | ---------------- | -------------- | ------- | ------------------------ | ---- | ---------- | | env | 发布环境 | String | development / production | 否 | production | | fixed | 顶部固定 | Boolean | - | 否 | false | | zIndex | 组件层级 | Number | - | 否 | 99 | | consoleName | 控制台名称 | String | - | 否 | - | | consoleEntryText | 控制台入口文本 | String | - | 否 | 控制台 | | accountData | 用户数据 | Object | - | 是 | - |

Account Data

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