前端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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端组件开发

你的钟意将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值