for_client/src/global/components/hc-card/index.vue

<template>
    <el-card class="hc-card-box" shadow="never"
             :class="[
                 (isSlotHeader || title || isSlotExtra || extraText)?'is-header':'',
                  isSlotSearchBar?'is-search-bar':'',
                   `is-action-${actionSize}`,
                   ui
             ]"
    >
        <template #header v-if="isSlotHeader || title || isSlotExtra || extraText">
            <div class="hc-card-header-box">
                <div class="hc-card-header">
                    <div class="title text-lg" v-if="!isSlotHeader && title">{{ title }}</div>
                    <slot v-if="isSlotHeader" name='header'/>
                </div>
                <div class="hc-card-header-extra" v-if="isSlotExtra || extraText">
                    <div class="extra" v-if="!isSlotExtra && extraText">{{ extraText }}</div>
                    <slot v-if="isSlotExtra" name='extra'/>
                </div>
            </div>
        </template>
        <div class="hc-card-search-bar" v-if="isSlotSearchBar">
            <slot name='search'/>
        </div>
        <div class="hc-card-main-box" :id="idRef" :class="isSlotAction?'is-action':''">
            <template v-if="scrollbar">
                <el-scrollbar>
                    <slot></slot>
                </el-scrollbar>
            </template>
            <template v-else>
                <slot></slot>
            </template>
        </div>
        <div class="hc-card-action-box" v-if="isSlotAction">
            <slot name='action'/>
        </div>
    </el-card>
</template>

<script setup>
import {ref,useSlots} from "vue";
const props = defineProps({
    ui: {
        type: String,
        default: ''
    },
    title: {
        type: [String,Number],
        default: ''
    },
    extraText: {
        type: [String,Number],
        default: ''
    },
    scrollbar: {
        type: Boolean,
        default: true
    },
    actionSize: {
        type: [String,Number],
        default: 'df'
    },
    idRef: {
        type: [String,Number],
        default: ''
    },
})

const slots = useSlots()

//判断<slot>是否有传值
const isSlotHeader = ref(!!slots.header);
const isSlotExtra = ref(!!slots.extra);
const isSlotAction = ref(!!slots.action);
const isSlotSearchBar = ref(!!slots.search);
</script>

<style lang="scss">
.hc-card-box.el-card {
    height: 100%;
    position: relative;
    --el-card-padding: 24px;
    --el-card-bg-color: #f1f5f8;
    --el-card-border-radius: 10px;
    --el-text-color-primary: #1A1A1A;
    box-shadow: -2px 0 10px 0 rgba(32,37,50,0.03), 0 10px 21px 20px rgba(32,37,50,0.03);
    border: 0;
    .el-card__header {
        height: 70px;
        padding: 14px 24px;
        border-bottom: 1px solid #e9e9e9;
    }
    .hc-card-header-box {
        position: relative;
        display: flex;
        align-items: center;
        .hc-card-header {
            position: relative;
            flex: 1;
            display: flex;
            align-items: center;
        }
        .hc-card-header-extra {
            position: relative;
            display: flex;
            align-items: center;
        }
    }
    .el-card__body {
        position: relative;
        height: 100%;
        .hc-card-search-bar {
            position: relative;
            margin-bottom: 20px;
        }
        .hc-card-main-box {
            position: relative;
            height: 100%;
        }
        .hc-card-action-box {
            position: absolute;
            height: auto;
            margin: -24px;
            width: 100%;
            bottom: 24px;
            padding: 20px 24px;
            border-top: 1px solid #e9e9e9;
            background-color: #f1f5f8;
        }
    }
    &.is-header .el-card__body {
        height: calc(100% - 70px);
    }
    &.is-header .el-card__body .hc-card-main-box:not(.is-action) {
        height: 100%;
    }
    &.is-action-df .el-card__body .hc-card-main-box.is-action {
        height: calc(100% - 63.5px);
    }
    &.is-action-lg .el-card__body .hc-card-main-box.is-action {
        height: calc(100% - 80px);
    }
    &.is-search-bar.is-action-df .el-card__body .hc-card-main-box {
        height: calc(100% - 40px);
        &.is-action {
            height: calc(100% - 124px);
        }
    }
    &.is-search-bar.is-action-lg .el-card__body .hc-card-main-box {
        height: calc(100% - 40px);
        &.is-action {
            height: calc(100% - 124px);
        }
    }
}
.hc-card-box.el-card:not(.is-header) {
    .el-card__body {
        height: 100%;
    }
}
</style>