引入组件

import { App } from "vue";
import Card from "./Card.vue";

export function setupRegisterGlobComp(app: App) {
  app.component("Card", Card);
}

参数配置

额外参数	类型	必填	说明
empty	Boolean	非必填	是否展示header部分，为true默认展示空白卡片
autoHeight	Boolean	非必填	高度自适应，false为默认330px高度
errCapture	Boolean	非必填	展示错误结果，为true展示error报错信息
slot [ name = title ]	Slot	非必填	卡片标题占位插槽
slot [ name = actions ]	Slot	非必填	卡片右上角占位插槽
slot [ name = content ]	Slot	非必填	卡片内容部分占位插槽
slot [ name = error ]	Slot	非必填	卡片报错信息提示占位插槽

代码示例

empty效果

<script setup lang="ts"></script>

<template>
  <Card empty />
</template>

<style scoped></style>

auto-height、插槽效果

<script setup lang="ts"></script>

<template>
  <Card empty auto-height>
    <template #title>
      <p class="truncate">标题</p>
    </template>
    <template #actions>
      <p class="truncate">操作栏</p>
    </template>
    <template #content>
      <div class="p-5 h-[200px]">内容</div>
    </template>
  </Card>
</template>

<style scoped></style>

err-capture、插槽效果

<script setup lang="ts"></script>

<template>
  <Card empty auto-height err-capture>
    <template #title>
      <p class="truncate">标题</p>
    </template>
    <template #actions>
      <p class="truncate">操作栏</p>
    </template>
    <template #error>
      <div class="flex justify-center items-center h-[220px] w-8/12 text-center mx-auto">
        <p class="text-lg font-semibold text-gray-500">报错了</p>
      </div>
    </template>
  </Card>
</template>

<style scoped></style>