index.vue 1.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <el-card :body-style="bodyStyle" class="vab-card" :shadow="shadow">
  3. <template v-if="$slots.header" #header>
  4. <slot name="header"></slot>
  5. </template>
  6. <el-skeleton v-if="skeleton" animated :loading="skeletonShow" :rows="skeletonRows">
  7. <template #default>
  8. <slot />
  9. </template>
  10. </el-skeleton>
  11. <slot v-else />
  12. </el-card>
  13. </template>
  14. <script lang="ts" setup>
  15. import { ElCard } from 'element-plus'
  16. defineOptions({
  17. name: 'VabCard',
  18. })
  19. defineProps({
  20. ...ElCard.props,
  21. shadow: {
  22. type: String,
  23. default: 'never',
  24. },
  25. skeleton: {
  26. type: Boolean,
  27. default: false,
  28. },
  29. skeletonRows: {
  30. type: Number,
  31. default: 4, //显示的数量会比传入的数量多 1
  32. },
  33. })
  34. const skeletonShow = ref<boolean>(true)
  35. setTimeout(() => {
  36. skeletonShow.value = false
  37. }, 500)
  38. </script>
  39. <style lang="scss" scoped>
  40. .vab-card {
  41. :deep() {
  42. .el-card__header {
  43. font-weight: 500;
  44. [class*='ri-'] {
  45. background: linear-gradient(120deg, #bd34fe 30%, var(--el-color-primary));
  46. background-clip: text;
  47. -webkit-text-fill-color: transparent;
  48. }
  49. }
  50. }
  51. }
  52. </style>