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

<template>
    <HcCard class="hc-new-card-box">
        <template v-if="isSlotHeader || titles || isSlotExtra || extraText">
            <div class="hc-card-header-box">
                <div class="hc-card-header">
                    <div v-if="!isSlotHeader && titles" class="title">{{ titles }}</div>
                    <slot v-if="isSlotHeader" name="header" />
                </div>
                <div v-if="isSlotExtra || extraText" class="hc-card-header-extra">
                    <div v-if="!isSlotExtra && extraText" class="extra">{{ extraText }}</div>
                    <slot v-if="isSlotExtra" name="extra" />
                </div>
            </div>
        </template>
        <div v-if="isSlotSearchBar" class="hc-card-search-bar">
            <slot name="search" />
        </div>
        <div class="hc-card-main">
            <div class="hc-card-main-body">
                <template v-if="scrollbar">
                    <el-scrollbar>
                        <slot />
                    </el-scrollbar>
                </template>
                <template v-else>
                    <slot />
                </template>
            </div>
        </div>
        <div v-if="isSlotAction" class="hc-card-action">
            <slot name="action" />
        </div>
    </HcCard>
</template>

<script setup>
import { ref, useSlots, watch } from 'vue'
const props = defineProps({
    ui: {
        type: String,
        default: '',
    },
    title: {
        type: [String, Number],
        default: '',
    },
    extraText: {
        type: [String, Number],
        default: '',
    },
    scrollbar: {
        type: Boolean,
        default: false,
    },
    actionSize: {
        type: [String, Number],
        default: 'lg',
    },
    idRef: {
        type: [String, Number],
        default: '',
    },
    bodyUi: {
        type: String,
        default: '',
    },
    actionUi: {
        type: String,
        default: '',
    },
})

const titles = ref(props.title)

//监听
watch(() => props.title, (val) => {
    titles.value = val ?? ''
})

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

<style lang="scss">
.el-card.hc-new-card-box {
    background: white;
    --el-card-padding: 10px;
    .hc-card-main-box {
        display: flex;
        flex-direction: column;
    }
    .hc-card-header-box {
        position: relative;
        display: flex;
        align-items: center;
        flex-shrink: 0;
        height: auto;
        border-bottom: 1px solid #E9E9E9;
        margin-bottom: 10px;
        .hc-card-header {
            position: relative;
            flex: 1;
            display: flex;
            align-items: center;
            .title {

            }
        }
        .hc-card-header-extra {
            position: relative;
            display: flex;
            align-items: center;
            margin-left: 24px;
            .extra {

            }
        }
    }
    .hc-card-search-bar {
        position: relative;
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
    .hc-card-main {
        position: relative;
        flex: 1;
        flex-basis: auto;
        .hc-card-main-body {
            position: absolute;
            inset: 0;
        }
    }
    .hc-card-action {
        position: relative;
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }
}
</style>