前端Vue自定义精美steps步骤条进度条插件 物流信息跟踪展示组件 流程审批跟进组件
随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。
通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。 组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等
今天给大家介绍的一款组件是自定义精美steps步骤条进度条插件 物流信息跟踪展示组件 流程审批跟进组件
阅读全文下载完整代码请关注微信公众号： 前端组件开发
效果图如下:
cc-defineStep
使用方法
<!-- colors: 设置主题色 stepData:步骤数据 -->
<cc-defineStep :colors="colors" :stepData="stepData"></cc-defineStep>
<!-- 数据设置 -->
colors:"#fa436a",
//模拟后台返回的数据
stepData: [
{
name: '提交申请',
time: '2023-06-09 20:01:49',
isNow: 0,
type: 1,
desc: '不想要了'
},
{
name: '等待审核',
time: '2023-06-09 20:01:49',
isNow: 0,
type: 1,
desc: '您的服务单已申请成功，待售后审核中'
},
{
name: '审核意见',
time: '2023-06-09 20:13:49',
isNow: 0,
type: 1,
desc: '您的售后单已收到，会在24小时与您联系。'
},
{
name: '审核上门取件',
time: '2023-06-09 20:13:49',
isNow: 0,
type: 1,
desc: '您的服务单已预约时间2023-06-10(周日) 15:00-20:00'
},
{
name: '取件成功',
time: '2023-06-10 18:54:55',
isNow: 0,
type: 1,
desc: '您的商品已取件成功'
},
{
name: '商家售后已收到',
time: '2023-06-12 09:01:49',
isNow: 0,
type: 1,
desc: '您的服务单商品已收到'
},
{
name: '返修换新订单生产',
time: '2023-06-12 13:19:49',
isNow: 0,
type: 1,
desc: '您的服务订单已生成新的订单'
},
{
name: '返修换新完成',
time: '2023-06-13 12:12:49',
isNow: 1,
type: 1,
desc: '您的服务单已完成，如有疑问请反馈，谢谢~，欢迎再次光临'
},
]
HTML代码实现部分
<template>
<!-- colors: 设置主题色 stepData:步骤数据 -->
<cc-defineStep :colors="colors" :stepData="stepData"></cc-defineStep>
</template>
<script>
export default {
data() {
return {
colors:"#fa436a",
//模拟后台返回的数据
stepData: [
{
name: '提交申请',
time: '2023-06-09 20:01:49',
isNow: 0,
type: 1,
desc: '不想要了'
},
{
name: '等待审核',
time: '2023-06-09 20:01:49',
isNow: 0,
type: 1,
desc: '您的服务单已申请成功，待售后审核中'
},
{
name: '审核意见',
time: '2023-06-09 20:13:49',
isNow: 0,
type: 1,
desc: '您的售后单已收到，会在24小时与您联系。'
},
{
name: '审核上门取件',
time: '2023-06-09 20:13:49',
isNow: 0,
type: 1,
desc: '您的服务单已预约时间2023-06-10(周日) 15:00-20:00'
},
{
name: '取件成功',
time: '2023-06-10 18:54:55',
isNow: 0,
type: 1,
desc: '您的商品已取件成功'
},
{
name: '商家售后已收到',
time: '2023-06-12 09:01:49',
isNow: 0,
type: 1,
desc: '您的服务单商品已收到'
},
{
name: '返修换新订单生产',
time: '2023-06-12 13:19:49',
isNow: 0,
type: 1,
desc: '您的服务订单已生成新的订单'
},
{
name: '返修换新完成',
time: '2023-06-13 12:12:49',
isNow: 1,
type: 1,
desc: '您的服务单已完成，如有疑问请反馈，谢谢~，欢迎再次光临'
},
]
}
},
onLoad() {
// 步骤数组数据反序
this.stepData.reverse()
}
}
</script>
<style lang="scss" scoped>
</style>
