隨著技術的發展，開發的復雜度也越來越高，傳統開發方式將一個系統做成了整塊應用，經常出現的情況就是一個小小的改動或者一個小功能的增加可能會引起整體邏輯的修改，造成牽一發而動全身，
通過組件化開發，可以有效實作單獨開發，單獨維護，而且他們之間可以隨意的進行組合，大大提升開發效率低，降低維護成本， 組件化對于任何一個業務場景復雜的前端應用以及經過多次迭代之后的產品來說都是必經之路，組件化要做的不僅僅是表面上看到的模塊拆分解耦，其背后還有很多作業來支撐組件化的進行，例如結合業務特性的模塊拆分策略、模塊間的互動方式和構建系統等等
今天給大家介紹的一款組件是自定義精美橫向步驟條組件 水平步驟條組件 可用于電商跟進商品訂單狀態 ；附原始碼下載地址：https://ext.dcloud.net.cn/plugin?id=13494
效果圖如下:
cc-horSteps
使用方法
<!-- 自定義水平步驟條 title：標題 colors：主題顏色 stepData：步驟資料 -->
<cc-horSteps title="服務狀態" :colors="colors" :stepData="https://www.cnblogs.com/ccVue/archive/2023/07/11/stepData"></cc-horSteps>
<!-- 設定資料 -->
colors: '#fa436a',
stepData: [ //該資料為后臺回傳 資料格式如此
/**
* isNow：1 代表當前step 走到了這一步
* type：1 代表當前該步驟已經完成
*/
{
step_id: 1,
name: '提交申請',
isNow: 0,
type: 1
},
{
step_id: 2,
name: '商家審核',
isNow: 0,
type: 1
},
{
step_id: 3,
name: '商家識訓',
isNow: 0,
type: 1
},
{
step_id: 4,
name: '換新中',
isNow: 1,
type: 0
},
{
step_id: 5,
name: '已完成',
isNow: 0,
type: 0
},
]
HTML代碼實作部分
<template>
<view >
<!-- 自定義水平步驟條 colors：主題顏色 stepData：步驟資料 -->
<cc-horSteps :colors="colors" :stepData="https://www.cnblogs.com/ccVue/archive/2023/07/11/stepData"></cc-horSteps>
</view>
</template>
<script>
export default {
data() {
return {
colors: '#fa436a',
stepData: [ //該資料為后臺回傳 資料格式如此
/**
* isNow：1 代表當前step 走到了這一步
* type：1 代表當前該步驟已經完成
*/
{
step_id: 1,
name: '提交申請',
isNow: 0,
type: 1
},
{
step_id: 2,
name: '商家審核',
isNow: 0,
type: 1
},
{
step_id: 3,
name: '商家識訓',
isNow: 0,
type: 1
},
{
step_id: 4,
name: '換新中',
isNow: 1,
type: 0
},
{
step_id: 5,
name: '已完成',
isNow: 0,
type: 0
},
]
}
},
onLoad(options) {
},
methods: {
}
}
</script>
<style lang="scss" scoped>
page {
background-color: #F8F8F8;
}
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/556976.html
標籤：其他
下一篇：返回列表