前端开发：自定义时间轴的使用

2021 年 12 月 26 日
本文字数：1927 字
阅读完需：约 6 分钟

前言

在前端开发过程中，业务需求经常也会涉及到关于时间进度方面，这种情况也是比较常见的需求，对于时间进度的相关需求常见的有：商城商品发货进度，行政需求的审批时间节点等业务场景。虽然 Vue 的组件里面也提供了对应的时间轴使用的组件，但是对于一些实际的开发业务需求来说不能满足，这个时候是需要自定义时间轴来实现对应的业务场景。

但是话又说回来了，如果能用框架自带的组件就不自定义组件，毕竟现成的好过需要重新开发的，但是避免不了的还是要自己重新开发自定义组件，那么本篇文章就来分享一个关于时间轴的自定义使用，是抛开 vant 等框架自带的时间轴组件来实现的自定义时间轴组件，本文案例以 Vue 项目的 Vant 框架下的时间轴使用为例。

1、组件的源文件： Process.vue

<template>
  <ul class="process-box">
    <li class="li" v-for="(item, idx) in this.processData" :key="idx">
      <div>
        <span class="title">{{ item.recordDescription }}  </span>
        <span class="time"> {{ timesToDate(item.updateDate) }} </span>
      </div>
    </li>
  </ul>
</template>
<script>
export default {
  props: {
    processData: Array,
  },
  name: "Process",
  data() {
    return {
      commentList:["comment"]
    };
  },
  computed: {},
  created() {},
  methods: {
    timesToDate(data) {
      var date = new Date(data);
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
      var h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
  },
};
</script>
<style scoped>
.process-box {
  margin: 20px 10px 0 10px;
}
 .process-box > li {
    font-size: 10px;
    padding: 0 0 40px 13px;
    position: relative;
  }
  .process-box > li:not(:last-child) {
      border-left: 1px solid #e4e4e4;
    }
  .process-box > li div:first-child {
      line-height: 14px;
      margin-bottom: 5px;
    }
  .process-box > li  .employee-info {
      color: #169bd5;
    }
  .process-box > li  .title {
    color: #169bd5;
      display: inline-block;
      margin: 0 10px;
    }
 .process-box > li::before {
      content: "";
      display: block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #e4e4e4;
      position: absolute;
      left: -5px;
      top: 0;
    }  
</style>

复制代码

2、注册组件：componentConfig.json

{
    "components": [
        { "name": "Process", "path": "Process" }
    ]
}

复制代码

3、具体使用组件的地方：CandidateDetail.vue

<template>
  <div slot="body" class="candidate-detail">
    <div class="time-line">
      <van-divider class="time-title">时间轴</van-divider>
      <div class="process">
        <Process :processData="processData"> </Process>
      </div>
    </div>
 </div>
</template>
<script>
export default {
   data() {}
};
</script>
<style scoped>
.candidate-detail {
  background-color: whitesmoke;
}
.time-line {
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: white;
}
.time-title {
  margin-bottom: 10px;
}
.process {
  height: 200px;
  overflow-y: auto;
}
</style>