Element分析（组件篇）——Card

整体

card组件，相对来说比较简单，包括了一个header和一个body，最外面是一个div.el-card的包裹。

<template>
  <div class="el-card">
    <div class="el-card__header" v-if="$slots.header || header">
      <slot name="header">{{ header }}</slot>
    </div>
    <div class="el-card__body" :style="bodyStyle">
      <slot></slot>
    </div>
  </div>
</template>

Header

header部分是一个名为header的具名slot，也可以传入名为header的prop，但是前者具有更高的优先级。

<div class="el-card__header" v-if="$slots.header || header">
  <slot name="header">{{ header }}</slot>
</div>

Body

body部分是一个匿名的slot，可以用于主体部分的自定义，同时还可以通过传入bodyStyle这一prop直接改变其样式。

<div class="el-card__body" :style="bodyStyle">
  <slot></slot>
</div>