最近搜索
Card 卡片 页面容器 页面模块
管理员
2024-12-05 09:51
<template>
<el-card style="max-width: 480px">
<template #header>
<div class="card-header">
<span>Card name</span>
</div>
</template>
<p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
<template #footer>Footer content</template>
</el-card>
</template>
<template>
<el-card style="max-width: 480px">
<p v-for="o in 4" :key="o" class="text item">{{ 'List item ' + o }}</p>
</el-card>
</template>
<template> <el-card style="max-width: 480px"> <template #header>Yummy hamburger</template> <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png" style="width: 100%" /> </el-card> </template>
<template> <div class="flex flex-wrap gap-4"> <el-card style="width: 480px" shadow="always">Always</el-card> <el-card style="width: 480px" shadow="hover">Hover</el-card> <el-card style="width: 480px" shadow="never">Never</el-card> </div> </template>
API
Attributes
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| header | 卡片的标题 你既可以通过设置 header 来修改标题，也可以通过 slot#header 传入 DOM 节点 | string | — |
| footer 2.4.3 | 卡片页脚。 你既可以通过设置 footer 来修改卡片底部内容，也可以通过 slot#footer 传入 DOM 节点 | string | — |
| body-style | body 的 CSS 样式 | object | — |
| body-class 2.3.10 | body 的自定义类名 | string | — |
| shadow | 卡片阴影显示时机 | enum | always |
Slots
| 插槽名 | 说明 |
|---|---|
| default | 自定义默认内容 |
| header | 卡片标题内容 |
| footer | 卡片页脚内容 |
联系站长
站长微信:xiaomao0055
站长QQ:14496453
按分类分组
按日期分组