<template>
|
<div class="section">
|
<div class="section-header" @click="onClick">
|
<div class="section-header__decoration" v-if="type" :class="type"/>
|
<slot v-else name="decoration"></slot>
|
|
<div class="section-header__content">
|
<span :style="{'font-size':titleFontSize,'color':titleColor}" class="section__content-title"
|
:class="{'distraction':!subTitle}">{{ title }}</span>
|
<span v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}"
|
class="section-header__content-sub">{{ subTitle }}</span>
|
</div>
|
|
<div class="section-header__slot-right">
|
<slot name="right"></slot>
|
</div>
|
</div>
|
|
<div class="section-content" :style="{padding: _padding}">
|
<slot/>
|
</div>
|
</div>
|
</template>
|
|
<script setup name="Section">
|
/**
|
* Section 标题栏
|
* @description 标题栏
|
* @property {String} type = [line|circle|square] 标题装饰类型
|
* @value line 竖线
|
* @value circle 圆形
|
* @value square 正方形
|
* @property {String} title 主标题
|
* @property {String} titleFontSize 主标题字体大小
|
* @property {String} titleColor 主标题字体颜色
|
* @property {String} subTitle 副标题
|
* @property {String} subTitleFontSize 副标题字体大小
|
* @property {String} subTitleColor 副标题字体颜色
|
* @property {String} padding 默认插槽 padding
|
*/
|
|
import {computed, watch} from "vue";
|
|
const props = defineProps({
|
type: {
|
type: String,
|
default: 'line'
|
},
|
title: {
|
type: String,
|
required: true,
|
default: ''
|
},
|
titleFontSize: {
|
type: String,
|
default: '14px'
|
},
|
titleColor: {
|
type: String,
|
default: '#333'
|
},
|
subTitle: {
|
type: String,
|
default: ''
|
},
|
subTitleFontSize: {
|
type: String,
|
default: '12px'
|
},
|
subTitleColor: {
|
type: String,
|
default: '#999'
|
},
|
padding: {
|
type: [Boolean, String],
|
default: false
|
}
|
})
|
|
const _padding = computed(() => {
|
if (typeof props.padding === 'string') {
|
return props.padding
|
}
|
return props.padding ? '10px' : ''
|
})
|
|
const emits = defineEmits(['click'])
|
const onClick = () => {
|
emits('click');
|
}
|
|
</script>
|
|
<style lang="less">
|
|
.section {
|
background-color: #fff;
|
|
.section-header {
|
position: relative;
|
display: flex;
|
flex-direction: row;
|
align-items: center;
|
padding: 12px 10px;
|
font-weight: normal;
|
|
.section-header__decoration {
|
margin-right: 6px;
|
background-color: #2979ff;
|
|
&.line {
|
width: 4px;
|
height: 12px;
|
border-radius: 10px;
|
}
|
|
&.circle {
|
width: 8px;
|
height: 8px;
|
border-radius: 50px;
|
}
|
|
&.square {
|
width: 8px;
|
height: 8px;
|
}
|
}
|
.section__content-title{
|
font-weight: bold;
|
}
|
.section-header__content {
|
|
display: flex;
|
flex-direction: column;
|
flex: 1;
|
color: #333;
|
|
.distraction {
|
flex-direction: row;
|
align-items: center;
|
}
|
|
&-sub {
|
margin-top: 2px;
|
}
|
}
|
|
.section-header__slot-right {
|
font-size: 14px;
|
}
|
}
|
|
.section-content {
|
font-size: 14px;
|
padding-left: 20px;
|
}
|
}
|
</style>
|
