BhtHeader
文档版本:1.0.0
描述
页头导航组件,用于展示站点 Logo、名称和一级菜单。
效果
![]()
示例
<bht-header></bht-header>
代码
<bht-header :ref="item.id" :item="item"></bht-header>
或者
<BhtHeader :ref="item.id" :item="item"></BhtHeader>
参数
| 参数 | 类型 | 必填 | 默认值 | 说明 |
|---|---|---|---|---|
| item | Object | 否 | - | 组件配置信息。 |
配置项
item.config.data 支持的常用字段如下:
| key | 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|---|
| loginUrl | Logo地址 | string | - | 请输入 logo地址 |
| loginIcon | Logo icon | string | - | 请输入 Logo icon |
| title | 系统名称 | string | 比嗨皮兔(悦行) | 请输入 系统名称 |
| href | 跳转地址 | string | / | 请输入 跳转地址 |
| textStyle | 字体样式 | string | color: #000000; font-size: 20px; | - |
| bgStyle | 背景样式 | string | - | 请输入背景样式 |
| groupName | 分组名称 | query | - | - |
| pageSize | 菜单条数 | query | 10 | 请输入显示的内容条数 |
| orderByColumn | 排序字段 | query | createDatetime | 请输入排序字段 |
| isAsc | 排序方式 | query | desc | 请输入排序方式(可选值:desc、asc) |
引入
import { BhtHeader } from '@behappyto/cms-ui-vue3'