JxlCard 卡片

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

基于 Element UI 的 el-card 卡片組件封裝。

<template>
  <el-card :shadow="shadow" :body-style="bodyStyle" v-bind="$attrs" :class="[ border ? '' : 'no-border']">
    <div v-if="title || $scopedSlots['title'] || extra || $scopedSlots['extra']" slot="header" :class="['card-header', headerBorder ? '' : 'no-border']" :style="headerStyle">
      <div v-if="title || $scopedSlots['title']" class="card-header__title">
        <slot name="title">{{ title }}</slot>
      </div>
      <div v-if="extra || $scopedSlots['extra']" class="card-header__extra">
        <slot name="extra">{{ extra }}</slot>
      </div>
    </div>
    <slot />
  </el-card>
</template>

<script>
/**
 * JxlCard 卡片
 * 將信息聚合在卡片容器中展示
 */
export default {
  name: 'JxlCard',
  props: {
    /**
     * 設置標題
     */
    title: {
      type: String,
      default: ''
    },
    /**
     * 設置額外的內容
     */
    extra: {
      type: String,
      default: ''
    },
    /**
     * 設置陰影顯示時機
     * 可選值：always / hover / never
     * always: 總是顯示
     * hover: 鼠標懸浮時顯示
     * never: 從不顯示
     */
    shadow: {
      type: String,
      default: 'always'
    },
    /**
     * 設置外邊框
     */
    border: {
      type: Boolean,
      default: true
    },
    /**
     * 設置 header下邊框
     */
    headerBorder: {
      type: Boolean,
      default: true
    },
    /**
     * 設置 header 的樣式
     */
    headerStyle: {
      type: Object,
      default: () => {
        return {}
      }
    },
    /**
     * 設置 body 的樣式
     */
    bodyStyle: {
      type: Object,
      default: () => {
        return {}
      }
    }
  }
}
</script>
<style lang="less">
.el-card {
  &.no-border {
    border: none;
  }
}
</style>
<style lang="less" scoped>
/deep/ .el-card__header {
  padding: 0;
  border: none;

  .card-header {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    border-bottom: 1px solid #e6ebf5;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    &.no-border {
      border: none;
    }
    .card-header__title {
      display: inline-block;
      flex: 1;
      color: #303233;
      font-weight: 600;
      font-size: 16px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .card-header__extra {
      float: right;
      margin-left: auto;
      color: #303233;
      font-weight: 400;
      font-size: 14px;
    }
  }
}
</style>

Card 屬性（Attributes）

移除屬性：header
新增屬性：border、header-border、header-style 、title 、extra
變動說明：移除 el-card 屬性 header，將其細化為 title 和 extra 兩個屬性。

Card 插槽（Slots）