@glodon-open/header-vue3 NPM

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	-	是	''