JXL组件：基于Vue生态编写jxl-card卡片

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）