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

最新推荐文章于 2025-09-18 16:53:42 发布

三掌柜666

最新推荐文章于 2025-09-18 16:53:42 发布

阅读量1w

点赞数 3

CC 4.0 BY-SA版权

分类专栏：大前端开发常识文章标签： vue.js

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/CC1991_/article/details/118198991

大前端开发常识专栏收录该内容

94 篇文章 ¥159.90 ¥299.90

订阅专栏

本文介绍了在前端开发中，当Vue自带组件无法满足时间进度需求时如何自定义时间轴组件。通过Process.vue组件源文件、componentConfig.json的注册以及在CandidateDetail.vue中的应用，详细阐述了自定义时间轴的实现过程，旨在解决复杂业务场景的需求。最终实现的效果既简单又实用，适合应对各种时间进度展示需求。

在前端开发过程中，业务需求经常也会涉及到关于时间进度方面，这种情况也是比较常见的需求，对于时间进度的相关需求常见的有：商城商品发货进度，行政需求的审批时间节点等业务场景。虽然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>

了解本专栏