# HorHeader


### 介绍

一个h5页面的头部 默认左边点击事件为back,title默认取route.meta.title,默认fixed布局，会生成顶部等高占位符


## 代码演示

### 基础用法

```html
<hor-header title="title1" :fixed="false" />
<hor-header title="title1" :fixed="false">
  <template #right>
    <hor-icon name="van-chat-o" />
  </template>
</hor-header>

```

## API

### 属性 Props

<table>
  <tr>
    <td>名称</td>
    <td>类型</td>
    <td>默认值</td>
  </tr>
  <tr v-for="(item, key) in horHeaderProps" :key="key">
    <td>{{ key }}</td>
    <td>{{ parseType(item.type || item) }}</td>
    <td>{{ reserve(item.default, '-') }}</td>
  </tr>
</table>

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>

### 插槽 Slots

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>


### 实例方法

<table>
  <tr>
    <td>名称</td>
    <td>说明</td>
  </tr>
  <tr>
    <td>xx</td>
    <td>xxx</td>
  </tr>
</table>



<script setup lang="ts">
  import { reserve } from '@daysnap/utils'
  import { HorCell } from '../hor-cell'
  import { HorHeader, horHeaderProps } from '.'
  import { parseType } from '../utils'
</script>