Skip to content

Commit 5a65c77

Browse files
author
Tenny
committed
feat(PageHeader): 新建页头组件
Signed-off-by: Tenny <joel.shu@qq.com>
1 parent 59392ea commit 5a65c77

File tree

7 files changed

+143
-3
lines changed

7 files changed

+143
-3
lines changed

‎docs/.vitepress/config.ts‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -111,9 +111,9 @@ export default defineConfig({
111111
link: '/components/selectori',
112112
},
113113
{
114-
"text": "DatePickerOri 日期选择",
115-
"link": "/components/datepickerori"
116-
}
114+
text: 'DatePickerOri 日期选择',
115+
link: '/components/datepickerori',
116+
},
117117
],
118118
},
119119
{
@@ -160,6 +160,10 @@ export default defineConfig({
160160
text: 'Tabs 标签页',
161161
link: '/components/tabs',
162162
},
163+
{
164+
text: 'PageHeader 页头',
165+
link: '/components/pageheader',
166+
},
163167
],
164168
},
165169
{

‎docs/.vitepress/theme/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@ import '../../../style/dialog-box';
3535
import '../../../style/popconfirm';
3636
import '../../../style/select-ori';
3737
import '../../../style/date-picker-ori';
38+
import '../../../style/page-header';
3839

3940
export default {
4041
extends: DefaultTheme,

‎docs/components/pageheader.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
# PageHeader 页头
2+
3+
通常用于页面的顶部，显示标题以及返回按钮。常用于二级、三级页面。
4+
5+
## 演示
6+
7+
<script setup>
8+
import { PageHeader } from "../../src"
9+
</script>
10+
11+
### 基础用法
12+
13+
基础用法
14+
15+
<ClientOnly>
16+
<CodePreview>
17+
<textarea lang="vue">
18+
<script setup>
19+
</script>
20+
<template>
21+
</template>
22+
</textarea>
23+
<template #preview>
24+
<PageHeader title="标题" sub-title="副标题"></PageHeader>
25+
</template>
26+
</CodePreview>
27+
</ClientOnly>
28+
29+
## API
30+
31+
### PageHeader Props
32+
33+
<!-- prettier-ignore -->
34+
| 参数 | 说明 | 类型 | 默认值 |
35+
| --- | --- | --- | --- |
36+
| x | x | x | x |

‎src/components/PageHeader.vue‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<template>
2+
<div :class="['nt-page-header', `nt-page-header-align-${titleAlign}`]">
3+
<div v-if="showBack" class="nt-page-header-left">
4+
<Button text>
5+
<BackIcon></BackIcon>
6+
<span>{{ backText }}</span>
7+
</Button>
8+
</div>
9+
<div class="nt-page-header-content">
10+
<slot>
11+
<div v-if="!isBlank(title)" class="nt-page-header-title">
12+
{{ title }}
13+
</div>
14+
<div v-if="!isBlank(subTitle)" class="nt-page-header-sub-title">
15+
{{ subTitle }}
16+
</div>
17+
</slot>
18+
</div>
19+
</div>
20+
</template>
21+
<script setup lang="ts">
22+
import Button from './Button.vue';
23+
import BackIcon from './icon/ArrowLeft.vue';
24+
import { isBlank } from 'ph-utils';
25+
26+
const props = withDefaults(
27+
defineProps<{
28+
/** 标题对齐方式 */
29+
titleAlign?: 'left' | 'center';
30+
/** 是否显示返回按钮 */
31+
showBack?: boolean;
32+
/** 左右两边的按钮操作区域是否高度填充 */
33+
operatorFill?: boolean;
34+
/** 返回文本 */
35+
backText?: string;
36+
/** 标题文本 */
37+
title?: string;
38+
/** 副标题 */
39+
subTitle?: string;
40+
}>(),
41+
{
42+
titleAlign: 'left',
43+
showBack: true,
44+
operatorFill: true,
45+
backText: '返回',
46+
},
47+
);
48+
</script>

‎src/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,3 +61,4 @@ export { default as List } from './components/List.vue';
6161

6262
export { default as Clickoutside } from './directives/clickoutside';
6363
export { default as Loading } from './directives/loading';
64+
export { default as PageHeader } from "./components/PageHeader.vue";

‎style/page-header/index.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.nt-page-header {
2+
display: flex;
3+
position: relative;
4+
align-items: center;
5+
}
6+
7+
.nt-page-header-operator {
8+
height: 100%;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
}
13+
14+
.nt-page-header-left,
15+
.nt-page-header-right {
16+
display: flex;
17+
align-items: center;
18+
flex: 0 0 auto;
19+
}
20+
21+
.nt-page-header-content {
22+
display: flex;
23+
align-items: center;
24+
}
25+
26+
.nt-page-header-sub-title {
27+
font-size: 14px;
28+
font-weight: 500;
29+
color: #999999;
30+
margin-left: 10px;
31+
}
32+
33+
.nt-page-header-align-left .nt-page-header-left {
34+
margin-right: 15px;
35+
}
36+
.nt-page-header-align-left .nt-page-header-right {
37+
margin-left: 15px;
38+
}
39+
40+
.nt-page-header-align-left .nt-page-header-content {
41+
flex: 1 0 auto;
42+
}
43+
44+
.nt-page-header-title {
45+
font-size: 16px;
46+
font-weight: 600;
47+
}

‎style/page-header/index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import '../icon/index.js';
2+
import '../button/index.js';
3+
import './index.css';

0 commit comments

Comments
 (0)