123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110 |
- <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>
|