el-card详细介绍
时间: 2023-10-03 08:04:06 浏览: 81
<-card> 是 Element UI 提供的一个卡片组件,它可以用于展示一些简单的信息或者图片等内容。它可以设置标题、文字、图片、操作按钮等,非常适合用于信息展示或者数据可视化。
<el-card> 组件的属性包括:
- :header:卡片的标题
- :body-style:卡片的样式
- :body-class:卡片的类名
- :shadow:卡片的阴影
- :padding:卡片的内边距
- :dis-hover:鼠标悬停时是否显示阴影
- :bordered:是否显示边框
- :img-src:卡片的图片地址
- :img-fit:图片的显示方式,包括 fill、contain、cover、none、scale-down
- :img-alt:图片的 alt 属性
- :is-hover:鼠标悬停时是否显示操作按钮
- :body-style:卡片主体的样式
- :footer:卡片底部的内容
<el-card> 组件的插槽包括:
- header:卡片的标题
- default:卡片的主体内容
- footer:卡片的底部内容
- extra:卡片的额外内容
应用场景:可以用于展示商品、文章、用户信息等。同时,结合其他 Element UI 的组件,如 <el-button> 和 <el-tag>,可以实现更丰富的功能和交互效果。
相关问题
el-row el-col el-card
el-row、el-col和el-card是Element UI框架中常用的布局组件。
el-row是一个水平方向的布局容器,用于将页面分为一行一行的内容。它可以使用属性来设置间距,如gutter属性指定每个el-col之间的间距。
el-col是el-row中的列组件,用于将一行分为若干列。它可以使用属性来设置每列的宽度,如span属性指定每个el-col占据的栅格数。
el-card是一个卡片组件,用于展示相关的信息。可以包含标题、内容和其他自定义的插槽。可以通过设置body-style属性来修改卡片的尺寸和边距颜色。
使用el-row、el-col和el-card可以方便地实现灵活的页面布局和展示多个卡片。el-container布局则可以实现自动换行的功能。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* [element-el-row-el-col使用布局,修改el-card边距<el-card :body-style=“{padding:‘10px‘}“>card1</...](https://blog.csdn.net/jieweiwujie/article/details/120378615)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [Element-UI 使用el-row 分栏布局的教程](https://download.csdn.net/download/weixin_38556822/14662196)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
vue el-card居中
要使el-card居中,可以使用flex布局。具体方法如下:
```html
<template>
<div class="card-container">
<el-card>
<el-row justify="center">
<el-col :span="10">
<el-input></el-input>
</el-col>
</el-row>
</el-card>
</div>
</template>
<style>
.card-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
```
在上面的代码中,我们使用了一个名为“card-container”的div来包含el-card。我们将其设置为flex布局,并使用justify-content和align-items属性将其水平和垂直居中。在el-card中,我们使用了一个el-row来包含el-input,并将其设置为居中对齐。这样,整个el-card就会居中显示了。