隨著技術的發展，開發的復雜度也越來越高，傳統開發方式將一個系統做成了整塊應用，經常出現的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發而動全身，
通過組件化開發，可以有效實作單獨開發，單獨維護，而且他們之間可以隨意的進行組合，大大提升開發效率低，降低維護成本， 組件化對于任何一個業務場景復雜的前端應用以及經過多次迭代之后的產品來說都是必經之路，組件化要做的不僅僅是表面上看到的模塊拆分解耦，其背后還有很多作業來支撐組件化的進行，例如結合業務特性的模塊拆分策略、模塊間的互動方式和構建系統等等
今天給大家介紹的一款組件是自定義精美steps步驟條進度條插件 物流資訊跟蹤展示組件 流程審批跟進組件；附帶原始碼下載地址： https://ext.dcloud.net.cn/plugin?id=13492
效果圖如下:
cc-defineStep
使用方法
<!-- colors: 設定主題色 stepData:步驟資料 -->
<cc-defineStep :colors="colors" :stepData="https://www.cnblogs.com/ccVue/archive/2023/07/12/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="https://www.cnblogs.com/ccVue/archive/2023/07/12/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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/557060.html
標籤：其他
下一篇：返回列表