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

    Card 卡片

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

    基础用法

    包含标题,内容和操作。

    Card 卡片 - 图1

    Card 组件包括headerbody部分,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. <style>
    11. .text {
    12. font-size: 14px;
    13. }
    14. .item {
    15. margin-bottom: 18px;
    16. }
    17. .clearfix:before,
    18. .clearfix:after {
    19. display: table;
    20. content: "";
    21. }
    22. .clearfix:after {
    23. clear: both
    24. }
    25. .box-card {
    26. width: 480px;
    27. }
    28. </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>
    6. <style>
    7. .text {
    8. font-size: 14px;
    9. }
    10. .item {
    11. padding: 18px 0;
    12. }
    13. .box-card {
    14. width: 480px;
    15. }
    16. </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="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.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. <style>
    16. .time {
    17. font-size: 13px;
    18. color: #999;
    19. }
    20. .bottom {
    21. margin-top: 13px;
    22. line-height: 12px;
    23. }
    24. .button {
    25. padding: 0;
    26. float: right;
    27. }
    28. .image {
    29. width: 100%;
    30. display: block;
    31. }
    32. .clearfix:before,
    33. .clearfix:after {
    34. display: table;
    35. content: "";
    36. }
    37. .clearfix:after {
    38. clear: both
    39. }
    40. </style>
    41. <script>
    42. export default {
    43. data() {
    44. return {
    45. currentDate: new Date()
    46. };
    47. }
    48. }
    49. </script>

    卡片阴影

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

    Card 卡片 - 图4

    通过shadow属性设置卡片阴影出现的时机:alwayshovernever

    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 传入 DOMstring
    body-style设置 body 的样式object{ padding: '20px' }
    shadow设置阴影显示时机stringalways / hover / neveralways