<template>
    <div :style="styleObject">
        <div :style="textStyleObject">
            {{ title }}
        </div>
    </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue';
// 定义组件属性
const props = defineProps({
    title: {
        type: String,
        default: ''
    },
    size: {
        type: String,
        default: '20px'
    },
    color: {
        type: String,
        default: '#409eff'
    }
});
// 根据传入的颜色生成样式对象
const styleObject = computed(() => {
    let size = props.size
    if(Number.isNaN(size)){
        size+= 'px';
    }
    return {
        height: size,
        borderLeft: `3px solid ${props.color}`,
        padding: '0 10px'
    };
});
const textStyleObject = computed(() => {
    let size = props.size
    if(Number.isNaN(size)){
        size+= 'px';
    }
    return {
        lineHeight: size,
        fontSize: `${props.size}`,
        fontWeight: 600
    };
});
</script>

<style scoped lang="scss"></style>