npm package: @qingbing/ts-v3-page-head
Description: 以 vue3 + element-plus 为基础封装的用于页头的组件
Author: qingbing
Latest version: 2.0.2

# PageHead 插件介绍

- [PageHead 插件介绍](#pagehead-插件介绍)
  - [1. 概要说明](#1-概要说明)
    - [1.1 地址](#11-地址)
    - [1.2 插件描述](#12-插件描述)
    - [1.3 重要依赖](#13-重要依赖)
    - [1.4 插件安装](#14-插件安装)
  - [2. 包说明](#2-包说明)
    - [2.1 属性说明](#21-属性说明)
  - [3. 示例](#3-示例)
    - [3.1 全局注册使用](#31-全局注册使用)
    - [3.2 模板组件使用](#32-模板组件使用)

## 1. 概要说明
### 1.1 地址

[https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-page-head](https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-page-head)

### 1.2 插件描述

以 vue3 + element-plus 为基础封装的用于页头的组件

### 1.3 重要依赖

- @qingbing/ts-v3-operate-button
- element-plus
- vue
- vue-router

### 1.4 插件安装

```bash
# yarn 安装
yarn add @qingbing/ts-v3-page-head

# npm 安装
npm i @qingbing/ts-v3-page-head
```

## 2. 包说明

### 2.1 属性说明

| 属性名         | 类型                      | 是否必需 | 默认值               | 意义                                                                                                 |
| :------------- | :------------------------ | :------- | :------------------- | :--------------------------------------------------------------------------------------------------- |
| conf           | TPageHeadConf             | 是       | {}                   | pageHeader 配置，参考 https://element-plus.org/zh-CN/component/page-header.html#attributes           |
| classNames     | string[]                  | 否       | []                   | 设置顶级类名                                                                                         |
| hideGoBackBtn  | boolean                   | 否       | false                | 是否隐藏 go back 按钮                                                                                |
| breadcrumbConf | TPageHeadBreadcrumb       | 否       | { "separator": '/' } | 面包屑， 参考 https://element-plus.org/zh-CN/component/breadcrumb.html#breadcrumb-attributes         |
| breadcrumbs    | TPageHeadBreadcrumbItem[] | 否       | []                   | 面包屑项目， 参考 https://element-plus.org/zh-CN/component/breadcrumb.html#breadcrumbitem-attributes |
| buttons        | TOperateButtonButton[]    | 否       | []                   | 操作按钮， 参考: https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-operate-button/               |
| goBack         | () => void                | 否       | -                    | 自定义回退函数                                                                                       |

## 3. 示例
### 3.1 全局注册使用

- 一旦注册， `PageHead` 作为组件全局通用 
- 使用方法参考 [3.2 模板组件使用](#32-模板组件使用), 去掉组件导入的语句即可

```ts
// main.ts
import { PageHeadPlugin } from '@qingbing/ts-v3-page-head'
app.use(PageHeadPlugin, {
  name: 'PageHead',
  options: {}
})
```

### 3.2 模板组件使用

```vue
<template>
    <PageHead :breadcrumbs="breadcrumbs" :classNames="['test', 'test2']" :breadcrumbConf="breadcrumbConf"
        :conf="pageHeadConf" :buttons="buttons" />
    <PageHead :hideGoBackBtn="false" :breadcrumbs="breadcrumbs" :classNames="['test', 'test2']"
        :breadcrumbConf="breadcrumbConf" :conf="{ title: '测试面板' }" :buttons="buttons" />
    <div>今天是个好天气 00001</div>
    <div>今天是个好天气 00002</div>
    <div>今天是个好天气 00003</div>
    <div>今天是个好天气 00004</div>
    <div>今天是个好天气 00005</div>
</template>

<script lang="ts" setup>
import "@qingbing/ts-v3-page-head/dist/style.css" // page-head 组件样式

import type { TPageHeadBreadcrumb, TPageHeadBreadcrumbItem, TPageHeadConf } from "@qingbing/ts-v3-page-head"
import type { TOperateButtonButton } from "@qingbing/ts-v3-operate-button"
import { PageHead } from "@qingbing/ts-v3-page-head"

const breadcrumbConf: TPageHeadBreadcrumb = {
    // "separator": "|"
}

const breadcrumbs: TPageHeadBreadcrumbItem[] = [
    {
        label: "Home",
        to: '/'
    }, {
        label: "Support",
        link: "http://www.qiyezhu.net",
        target: "_blank"
    }, {
        label: "Test",
        to: '/test'
    }, {
        label: "Current",
    }
]

const pageHeadConf: TPageHeadConf = {
    title: "控制面板",
    content: "这个是控制面板"
}

const buttons: TOperateButtonButton[] = [
    {
        label: 'Add',
        linkType: "primary",
        handle: () => {
            console.log("Add Function");
        }
    }, {
        label: 'Print',
        handle: () => {
            console.log("Print Function");
        }
    },
]
</script>
```