You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
63 lines
1.2 KiB
63 lines
1.2 KiB
7 months ago
|
<!-- @format -->
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<a-page-header
|
||
|
|
class="ns-page-header"
|
||
|
|
v-bind="$attrs"
|
||
|
|
:class="{ 'ns-page-header-sticky': sticky }">
|
||
|
|
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
|
||
|
|
<slot :name="item" v-bind="data || {}"> </slot>
|
||
|
|
</template>
|
||
|
|
</a-page-header>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { defineComponent } from 'vue';
|
||
|
|
|
||
|
|
export default defineComponent({
|
||
|
|
name: 'NsPageHeader',
|
||
|
|
props: {
|
||
|
|
sticky: {
|
||
|
|
type: Boolean,
|
||
|
|
default: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
setup(props) {
|
||
|
|
return {};
|
||
|
|
},
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.ant-page-header.ns-page-header {
|
||
|
|
padding: 20px 24px;
|
||
|
|
margin-bottom: 24px;
|
||
|
|
border-bottom: 1px solid #f0f2f5;
|
||
|
|
|
||
|
|
&.ns-page-header-sticky {
|
||
|
|
position: sticky;
|
||
|
|
z-index: 200;
|
||
|
|
top: 0;
|
||
|
|
background-color: @white;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-page-header-heading) {
|
||
|
|
height: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-page-header-heading-left) {
|
||
|
|
margin: 0 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
:deep(.ant-page-header-heading-extra) {
|
||
|
|
margin: 0 0;
|
||
|
|
}
|
||
|
|
:deep(.ant-btn) {
|
||
|
|
margin-left: 12px !important;
|
||
|
|
}
|
||
|
|
.ant-page-header-heading-title {
|
||
|
|
font-size: 18px;
|
||
|
|
line-height: 32px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|