Skip to content

卡片

202字小于1分钟

2024-08-18

概述

使用 <Card> 组件在页面中显示卡片。

也可以使用 markdown 卡片容器 语法,替代 <Card> 组件。

Props

名称类型默认值说明
titlestring''标题
iconstring | { svg: string }''显示在标题左侧的图标,支持 iconify 所有图标,也可以使用 图片链接

插槽

名称说明
default卡片内容
title自定义标题

示例

输入:

<Card title="卡片标题" icon="twemoji:astonished-face">
  这里是卡片内容。
</Card>

<Card>
  <template #title>
    <p style="color: red">卡片标题</p>
  </template>
  这里是卡片内容。
</Card>

输出:

卡片标题

这里是卡片内容。

卡片标题

这里是卡片内容。