<template>
|
<div class="flex flex-col" :class="[`gap-${gapLen}`]">
|
<div class="flex-items-center justify-between">
|
<div class="text-base " :class="[level==='1' ? 'font-bold':'text-secondary']">{{ title }}</div>
|
<div class="flex-items-center gap-3" v-if="$slots.right">
|
<slot name="right"></slot>
|
</div>
|
</div>
|
|
<slot></slot>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import { computed } from 'vue';
|
|
type HeaderLevel = '1' | '2';
|
|
const props = defineProps({
|
title: {
|
type: String,
|
},
|
/** @description 标题等级 */
|
level: {
|
type: String as () => HeaderLevel,
|
default: '1',
|
},
|
});
|
|
const gapLen = computed(() => {
|
if (props.level === '1') {
|
return '2';
|
} else {
|
return '2';
|
}
|
});
|
</script>
|
<style scoped lang="scss"></style>
|
