xiaojibeier
82 lines
1.8 KiB
Vue
Executable File
82 lines
1.8 KiB
Vue
Executable File
<template>
|
|
<el-card :body-class="props.bodyClass" :body-style="props.bodyStyle" :class="['vab-card', $attrs.class]" :shadow="props.shadow">
|
|
<template v-if="$slots.header || props.title" #header>
|
|
<slot v-if="$slots.header" name="header"></slot>
|
|
<template v-else>{{ props.title }}</template>
|
|
</template>
|
|
<el-skeleton v-if="props.skeleton" animated :loading="skeletonShow" :rows="props.skeletonRows">
|
|
<template #default>
|
|
<slot></slot>
|
|
</template>
|
|
</el-skeleton>
|
|
<slot v-else></slot>
|
|
<template v-if="$slots.footer" #footer>
|
|
<slot name="footer"></slot>
|
|
</template>
|
|
</el-card>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, onBeforeUnmount } from 'vue'
|
|
import { ElCard } from 'element-plus'
|
|
|
|
// 定义组件名称
|
|
defineOptions({
|
|
name: 'VabCard',
|
|
})
|
|
|
|
// 定义 props
|
|
const props = defineProps({
|
|
...ElCard.props,
|
|
shadow: {
|
|
type: String,
|
|
default: 'never',
|
|
},
|
|
skeleton: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
skeletonRows: {
|
|
type: Number,
|
|
default: 5, // 显示的数量会比传入的数量多 1
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
|
|
const skeletonShow = ref(true)
|
|
|
|
const timer = setTimeout(() => {
|
|
skeletonShow.value = false
|
|
}, 500)
|
|
|
|
onBeforeUnmount(() => {
|
|
if (timer) clearTimeout(timer)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.vab-card {
|
|
:deep() {
|
|
.el-card__header {
|
|
font-weight: 500;
|
|
color: inherit;
|
|
background: inherit;
|
|
|
|
[class*='ri-'] {
|
|
background-image: linear-gradient(120deg, #bd34fe 30%, var(--el-color-primary));
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
|
|
.el-skeleton {
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
</style>
|