Card 卡片

将信息聚合在卡片容器中展示。

基础用法

包含标题，内容和操作。

Card 组件包括header和body部分，header部分需要有显式具名 slot 分发，同时也是可选的。

 1 <el-card class="box-card">
 2   <div slot="header" class="clearfix">
 3     <span>卡片名称</span>
 4     <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
 5   </div>
 6   <div v-for="o in 4" :key="o" class="text item">
 7     {{'列表内容 ' + o }}
 8   </div>
 9 </el-card>
10 
11 <style>
12   .text {
13     font-size: 14px;
14   }
15 
16   .item {
17     margin-bottom: 18px;
18   }
19 
20   .clearfix:before,
21   .clearfix:after {
22     display: table;
23     content: "";
24   }
25   .clearfix:after {
26     clear: both
27   }
28 
29   .box-card {
30     width: 480px;
31   }
32 </style>
View Code

简单卡片

卡片可以只有内容区域。

 1 <el-card class="box-card">
 2   <div v-for="o in 4" :key="o" class="text item">
 3     {{'列表内容 ' + o }}
 4   </div>
 5 </el-card>
 6 
 7 <style>
 8   .text {
 9     font-size: 14px;
10   }
11 
12   .item {
13     padding: 18px 0;
14   }
15 
16   .box-card {
17     width: 480px;
18   }
19 </style>
View Code

带图片

可配置定义更丰富的内容展示。

配置body-style属性来自定义body部分的style，我们还使用了布局组件。

 1 <el-row>
 2   <el-col :span="8" v-for="(o, index) in 2" :key="o" :offset="index > 0 ? 2 : 0">
 3     <el-card :body-style="{ padding: '0px' }">
 4       <img src="~examples/assets/images/hamburger.png" class="image">
 5       <div style="padding: 14px;">
 6         <span>好吃的汉堡</span>
 7         <div class="bottom clearfix">
 8           <time class="time">{{ currentDate }}</time>
 9           <el-button type="text" class="button">操作按钮</el-button>
10         </div>
11       </div>
12     </el-card>
13   </el-col>
14 </el-row>
15 
16 <style>
17   .time {
18     font-size: 13px;
19     color: #999;
20   }
21   
22   .bottom {
23     margin-top: 13px;
24     line-height: 12px;
25   }
26 
27   .button {
28     padding: 0;
29     float: right;
30   }
31 
32   .image {
33     width: 100%;
34     display: block;
35   }
36 
37   .clearfix:before,
38   .clearfix:after {
39       display: table;
40       content: "";
41   }
42   
43   .clearfix:after {
44       clear: both
45   }
46 </style>
47 
48 <script>
49 export default {
50   data() {
51     return {
52       currentDate: new Date()
53     };
54   }
55 }
56 </script>
View Code

Attributes

参数说明类型可选值默认值
header 设置 header，也可以通过 slot#header 传入 DOM string — —
body-style 设置 body 的样式 object — { padding: '20px' }
posted @ 2018-03-16 06:49  大姐姐小姐姐  阅读(2412)  评论(0)  编辑  收藏  举报