### 使用
Element-UI 的
el-card
组件
在
Vue 2 中使用 `
el-card`
组件相对简单，主要通过引入
Element-UI 并注册
组件来实现。以下是详细的说明和示例。
#### 安装并引入
Element-UI
为了能够在项目中使用 `
el-card`
组件，首先需要安装
Element-UI：
```bash
npm install
element-ui --save
```
接着，在项目的入口文件（通常是 main.js 或者类似的初始化文件）中全局引入
Element-UI 和样式：
```javascript
import
Vue from '
vue';
import
ElementUI from '
element-ui';
import '
element-ui/lib/theme
-chalk/index.css';
Vue.use(
ElementUI);
```
#### 基本用法
下面是一个基本的例子展示如何创建一个卡片
组件：
```html
<template>
<div class="card
-demo">
<!
-- 简单的 card
-->
<
el-card class="box
-card">
<div slot="header" class="clearfix">
<span>卡片名称</span>
</div>
<div v
-for="o in 4" :key="o" class="text item">
{{'列表内容 ' + o }}
</div>
</
el-card>
<!
-- 带图片的 card
-->
<
el-row style="margin
-top: 20px;">
<
el-col :span="8" v
-for="(item, index) in items" :key="index" :offset="index > 0 ? 2 : 0">
<
el-card :body
-style="{ padding: '0px' }">
<img src="/path/to/image.jpg" class="image"/>
<div style="padding: 14px;">
<span>{{ item.title }}</span>
<div class="bottom clearfix">
<time class="time">{{ currentDate }}</time>
<
el-button type="text" class="
button">操作
按钮</
el-button>
</div>
</div>
</
el-card>
</
el-col>
</
el-row>
</div>
</template>
<script>
export default {
data() {
return {
currentDate: new Date(),
items: [
{ title: '标题一' },
{ title: '标题二' }
]
};
}
};
</script>
<style scoped>
.time {
font
-size: 13px;
color: #999;
}
.bottom {
margin
-top: 13px;
line
-height: 12px;
}
.
button {
float: right;
}
.text {
font
-size: 14px;
}
.item {
margin
-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
.box
-card {
width: 480px;
}
.image {
width: 100%;
height: auto;
}
</style>
```
这段代码展示了两种类型的卡片：一种是带有头部标题的基础卡片；另一种则是带有一张图片以及一些额外信息的卡片[^2]。
#### 属性介绍
| 参数 | 说明 | 类型 | 默认值 |
|
--- |
--- |
--- |
--- |
| bodyStyle | 设置 .
el-card__body 样式 | object | `{}` |
| shadow | 控制阴影显示时机 | string (`always`, `hover`, `never`) | always |
此表格列出了部分常用的属性配置选项，更多细节可查阅官方文档获取最新最全的信息。
扫一扫
503
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
