自定义ElementUi的Timeline组件

自定义ElementUi的Timeline组件

自定义ElementUi的Timeline组件
1.效果图

2.组件封装代码

<template>
  <div id="time-line">
    <el-timeline>
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :icon="activity.icon"
        :type="activity.type || 'primary'"
        :color="activity.color || '#409EFF'"
        :size="activity.size || 'large'"
        :timestamp="activity.timestamp">
        <!--  对象  -->
        <div v-if="typeof activity.content === 'object'">
          <div v-for="(value, i) in activity.content" :key="i" v-html="value"></div>
        </div>
        <!--  html字符串  -->
        <div v-else>
          <div v-html="activity.content"></div>
        </div>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
  export default {
    name: "CustomTimeline",
    props: {
      /**
       * 映射工具
       * 当content为Object类型是，用此对象映射content的参数名称
       */
      mapper: Object,
      /**
       * 数据结构：
       *     结构1：
       *         {
       *           content: {
       *             key: value
       *           },
       *           timestamp: date,
       *           // 非必填，默认#409EFF
       *           color: hsl / hsv / hex / rgb,
       *           // 非必填，默认primary
       *           type: primary / success / warning / danger / info,
       *           // 非必填，默认large
       *           size: normal / large,
       *           // 非必填，默认''
       *           icon: string
       *         }
       *     结构2：
       *         {
       *           content: html / string,
       *           timestamp: date,
       *           // 非必填，默认#409EFF
       *           color: hsl / hsv / hex / rgb,
       *           // 非必填，默认primary
       *           type: primary / success / warning / danger / info,
       *           // 非必填，默认large
       *           size: normal / large,
       *           // 非必填，默认''
       *           icon: string
       *         }
       */
      activities: Array
    }
  }
</script>

<style lang="scss" type="text/scss">
  #time-line {
    .el-timeline {
      margin-left: 150px;

      .el-timeline-item {
        .el-timeline-item__wrapper {
          .el-timeline-item__timestamp {
            margin-top: 8px;
            position: absolute !important;
            left: -150px;
            top: -5px;
            font-size: 14px !important;
          }

          .el-timeline-item__content {
            color: #909399;
          }
        }
      }
    }
  }
</style>

3.引用

<template>
	<div>
	    <Timeline :mapper="mapper" :activities="activities"/>
	</div>
</template>

<script>
  import Timeline from '@/components/Timeline/index';
  export default {
    name: 'ConsumerDetail',
    components: {VxeDialog, Timeline},
    data() {
      return {
        mapper: {
          user: '用户',
          descInfo: '描述',
          state: '状态'
        },
        activities: [{
          content: {
            user: 'admin',
            descInfo: '支持使用图标',
            state: '草稿',
          },
          timestamp: '2018-04-12 20:46',
        }, {
          content: '<div>admin &nbsp;&nbsp;&nbsp;&nbsp; <span style="color: #000000">申请发布</span></div><div>拒绝发布</div>',
          timestamp: '2018-04-03 20:46'
        }, {
          content: '<div>admin &nbsp;&nbsp;&nbsp;&nbsp; <span style="color: #000000">审核未通过</span></div><div>拒绝发布</div>',
          timestamp: '2018-04-03 20:46'
        }]
      }
  }
</script>  

4.自定义Timeline时间线样式

// 时间线
/deep/ .el-timeline {
  // 每一个item
  /deep/ .el-timeline-item {
    //   线
    /deep/ .el-timeline-item__tail {
      border-left: 2px solid #28567f;
    }
    // 圆点颜色
    /deep/ .el-timeline-item__node {
      background-color: rgb(72, 147, 255);
    }
    // 圆点大小与位置
    /deep/ .el-timeline-item__node--normal {
      left: -3px;
      width: 18px;
      height: 18px;
    }
    // 右边文字
    /deep/ .el-timeline-item__wrapper {
      // 标题
      /deep/ .el-timeline-item__content {
        color: #00e9ea;
      }
      //   内容
      /deep/ .el-timeline-item__timestamp {
        color: #8393b0;
      }
    }
  }
}