elementui 中的card 源码解析

为了提高开发效率，统一规范，出现了多种ui框架，后台管理系统中常用的antd design,bootstrap以及elementui 等，今天，对elementui 中的card组件进行分析

一、源码的目录

在项目中安装element-ui 的依赖，找到node_modules文件夹下的element-ui,内容如图一所示：

 

图一  源码目录结构

• lib文件夹存放element-ui打包后的文件，也就是项目实际依赖了的文件
• packages文件夹存放组件相关的源代码，也是之后源码分析的主要目标。
• src文件夹存放了如指令、混入、工具方法等源代码
• types文件夹存放了ts的类型声明文件，方便引入 typescript 写的项目中，需要在 package.json 中指定 typing 字段的值为 声明的入口文件才能生效。 

二、源码解析

card组件的封装主要是应用了vue中的插槽，属性绑定以及v-if 展示于隐藏等，如果有未了解的知识点，请到vue官网（https://v2.cn.vuejs.org/v2/guide/）

1、card组件

<template>
  <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
    <div class="el-card__header" v-if="$slots.header || header">
      <!-- card 中的头内容，这里是具名插槽-->
      <slot name="header">{{ header }}</slot>
    </div>
    <div class="el-card__body" :style="bodyStyle">
      <!-- card 中的body（主体内容），这里是默认插槽 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'ElCard',
    props: {
      header: {},
      bodyStyle: {},
      shadow: {
        type: String
      }
    }
  };
</script>

 2、card组件的相关属性

图二  组件属性

 3、card组件属性的应用

（1）header属性

  <el-card>
      <!-- 具名插槽 -->
      <div slot="header">卡片名称</div>
      <!-- 默认插槽 -->
      <div>我是卡片内容</div>
    </el-card>

运行结果如下图所示：

图三  组件的具名插槽header

 （2）body-style 属性

这个属性是调整card组件中的body的样式，默认为{padding: '20px'},可通过绑定属性进行修改

    <!-- 修改body体的样式 -->
    <el-card :body-style="{ padding: '10px' }">
      <div slot="header">卡片名称</div>
      <div>我是卡片内容</div>
    </el-card>

运行结果如下：

图四  组件的body-style属性设置card中的body样式  

（3）shadow 设置阴影的显示时机，默认一直显示

<el-row :gutter="12">
  <el-col :span="8">
    <el-card shadow="always">
      总是显示
    </el-card>
  </el-col>
  <el-col :span="8">
    <el-card shadow="hover">
      鼠标悬浮时显示
    </el-card>
  </el-col>
  <el-col :span="8">
    <el-card shadow="never">
      从不显示
    </el-card>
  </el-col>
</el-row>

运行结果如下图所示：

图五  组件中的shadow设置阴影