archives/src/global/components_bak/hc-card/item.vue

<template>
    <div class="hc-card-item-box"
         :class="[
             (isSlotHeader || title || isSlotExtra || extraText)?'is-header':'',
             isSlotAction ? 'is-action' : '', ui
         ]">
        <div class="hc-card-item-header" v-if="isSlotHeader || title || isSlotExtra || extraText">
            <div class="item-header">
                <span v-if="!isSlotHeader && title">{{ title }}</span>
                <slot v-if="isSlotHeader" name='header'/>
            </div>
            <div class="item-extra" v-if="isSlotExtra || extraText">
                <span v-if="!isSlotExtra && extraText">{{ extraText }}</span>
                <slot v-if="isSlotExtra" name='extra'/>
            </div>
        </div>
        <div class="hc-card-item-body">
            <template v-if="scrollbar">
                <el-scrollbar>
                    <slot></slot>
                </el-scrollbar>
            </template>
            <template v-else>
                <slot></slot>
            </template>
        </div>
        <div class="hc-card-item-action" v-if="isSlotAction">
            <slot name='action'/>
        </div>
    </div>
</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: false
    },
})

const slots = useSlots()

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

<style lang="scss" scoped>
.hc-card-item-box {
    position: relative;
    height: 100%;
    background: #E7EEF4;
    border-radius: 10px;
    padding: 14px;
    .hc-card-item-header {
        position: relative;
        font-weight: bold;
        display: flex;
        align-items: center;
        height: 32px;
        margin-bottom: 14px;
        color: var(--el-color-primary-dark-2);
        .item-header {
            flex: 1;
            position: relative;
            display: flex;
            align-items: center;
        }
        .item-extra {
            position: relative;
            display: flex;
            align-items: center;
            margin-left: 120px;
        }
    }
    .hc-card-item-body {
        position: relative;
        height: 100%;
        overflow: hidden;
    }
    .hc-card-item-action {
        position: relative;
        margin-top: 18px;
        height: 32px;
    }
    &.is-header:not(.is-action),
    &.is-action:not(.is-header) {
        .hc-card-item-body {
            height: calc(100% - 46px);
        }
    }
    &.is-header.is-action .hc-card-item-body {
        height: calc(100% - 46px - 50px);
    }
}
</style>