https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-page-head
以 vue3 + element-plus 为基础封装的用于页头的组件
- @qingbing/ts-v3-operate-button
- element-plus
- vue
- vue-router
# yarn 安装
yarn add @qingbing/ts-v3-page-head
# npm 安装
npm i @qingbing/ts-v3-page-head| 属性名 | 类型 | 是否必需 | 默认值 | 意义 |
|---|---|---|---|---|
| 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 | 否 | - | 自定义回退函数 |
- 一旦注册，
PageHead作为组件全局通用 - 使用方法参考 3.2 模板组件使用, 去掉组件导入的语句即可
// main.ts
import { PageHeadPlugin } from '@qingbing/ts-v3-page-head'
app.use(PageHeadPlugin, {
name: 'PageHead',
options: {}
})<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>