• Card 卡片
    • 基础用法
    • 简单卡片
    • 带图片
    • 卡片阴影
    • Attributes

    Card 卡片

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

    基础用法

    包含标题，内容和操作。

    Card 卡片 - 图1

    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>
    11. <style>
    12.   .text {
    13.     font-size: 14px;
    14.   }
    16.   .item {
    17.     margin-bottom: 18px;
    18.   }
    20.   .clearfix:before,
    21.   .clearfix:after {
    22.     display: table;
    23.     content: "";
    24.   }
    25.   .clearfix:after {
    26.     clear: both
    27.   }
    29.   .box-card {
    30.     width: 480px;
    31.   }
    32. </style>

    简单卡片

    卡片可以只有内容区域。

    Card 卡片 - 图2

    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>
    7. <style>
    8.   .text {
    9.     font-size: 14px;
    10.   }
    12.   .item {
    13.     padding: 18px 0;
    14.   }
    16.   .box-card {
    17.     width: 480px;
    18.   }
    19. </style>

    带图片

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

    Card 卡片 - 图3

    配置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>
    16. <style>
    17.   .time {
    18.     font-size: 13px;
    19.     color: #999;
    20.   }
    22.   .bottom {
    23.     margin-top: 13px;
    24.     line-height: 12px;
    25.   }
    27.   .button {
    28.     padding: 0;
    29.     float: right;
    30.   }
    32.   .image {
    33.     width: 100%;
    34.     display: block;
    35.   }
    37.   .clearfix:before,
    38.   .clearfix:after {
    39.       display: table;
    40.       content: "";
    41.   }
    43.   .clearfix:after {
    44.       clear: both
    45.   }
    46. </style>
    48. <script>
    49. export default {
    50.   data() {
    51.     return {
    52.       currentDate: new Date()
    53.     };
    54.   }
    55. }
    56. </script>

    卡片阴影

    可对阴影的显示进行配置。

    Card 卡片 - 图4

    通过shadow属性设置卡片阴影出现的时机：always、hover或never。

    1. <el-row :gutter="12">
    2.   <el-col :span="8">
    3.     <el-card shadow="always">
    4.       总是显示
    5.     </el-card>
    6.   </el-col>
    7.   <el-col :span="8">
    8.     <el-card shadow="hover">
    9.       鼠标悬浮时显示
    10.     </el-card>
    11.   </el-col>
    12.   <el-col :span="8">
    13.     <el-card shadow="never">
    14.       从不显示
    15.     </el-card>
    16.   </el-col>
    17. </el-row>

    Attributes

    参数 说明 类型 可选值 默认值
    header 设置 header，也可以通过 slot#header 传入 DOM string — —
    body-style 设置 body 的样式 object — { padding: '20px' }
    shadow 设置阴影显示时机 string always / hover / never always

    原文: http://element-cn.eleme.io/#/zh-CN/component/card