element-ui element-plus card - 分析

源代码地址

version:element-plus 1.0.1-beta.0

<template>
  <div>
    <div class="el-card" :class="shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow'">
      <!-- header 插槽 -->
      <!-- 这里具名插槽优先级高于属性方式 -->
      <div v-if="$slots.header || header" class="el-card__header">
        <!-- 如果使用属性方式来使用插槽 那么只会有一个header的文字显示，个人推荐使用插槽方式，可以自定义内容 -->
        <slot name="header">{{ header }}</slot>
      </div>
      <div class="el-card__body" :style="bodyStyle">
        <slot></slot>
      </div>
    </div>
  </div>
</template>

<script lang='ts'>
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'ElCard',
  props: {
    header: {
      type: String,
      default: '',
    },
    // 官方文档上显示的是object，我测试传object也可以
    // 传String的话就不需要 {} 包裹
    // bodyStyle: 'color:red;background:yellow;'
    bodyStyle: {
      type: String,
      default: '',
    },
    // 官方定义只支持always / hover / never
    // 他这里没加 validator
    shadow: {
      type: String,
      default: '',
    },
  },
})
</script>