隨著技術(shù)的發(fā)展，開發(fā)的復(fù)雜度也越來越高，傳統(tǒng)開發(fā)方式將一個(gè)系統(tǒng)做成了整塊應(yīng)用，經(jīng)常出現(xiàn)的情況就是一個(gè)小小的改動(dòng)或者一個(gè)小功能的增加可能會(huì)引起整體邏輯的修改，造成牽一發(fā)而動(dòng)全身。

通過組件化開發(fā)，可以有效實(shí)現(xiàn)單獨(dú)開發(fā)，單獨(dú)維護(hù)，而且他們之間可以隨意的進(jìn)行組合。大大提升開發(fā)效率低，降低維護(hù)成本。?組件化對(duì)于任何一個(gè)業(yè)務(wù)場(chǎng)景復(fù)雜的前端應(yīng)用以及經(jīng)過多次迭代之后的產(chǎn)品來說都是必經(jīng)之路。組件化要做的不僅僅是表面上看到的模塊拆分解耦，其背后還有很多工作來支撐組件化的進(jìn)行，例如結(jié)合業(yè)務(wù)特性的模塊拆分策略、模塊間的交互方式和構(gòu)建系統(tǒng)等等

今天給大家介紹的一款組件是：自定義商品訂單tabs標(biāo)題欄選項(xiàng)卡組件 可設(shè)置文字下劃線顏色，附帶源碼下載地址：https://ext.dcloud.net.cn/plugin?id=13485

效果圖如下：

文章來源地址http://www.zghlxwxcb.cn/news/detail-594362.html

cc-orderTabs

使用方法

<!-- colors：設(shè)置顏色 tabList：tabs數(shù)組 active：當(dāng)前選擇序列 tabsClick：點(diǎn)擊事件 -->

<view class="nav_top" style="border-bottom: 1upx solid #F8F8F8;margin-top: 10px;">

<cc-orderTabs :colors="colors" :tabList="tabList" :active="active" @tabsClick="tabsClick"></cc-orderTabs>

</view>

HTML代碼實(shí)現(xiàn)部分

<template>

<view class="content">

<!-- colors：設(shè)置顏色 tabList：tabs數(shù)組 active：當(dāng)前選擇序列 tabsClick：點(diǎn)擊事件 -->

<view class="nav_top" style="border-bottom: 1upx solid #F8F8F8;margin-top: 10px;">

<cc-orderTabs :colors="colors" :tabList="tabList" :active="active" @tabsClick="tabsClick"></cc-orderTabs>

</view>

<!-- colors：設(shè)置顏色 tabList：tabs數(shù)組 active：當(dāng)前選擇序列 tabsClick：點(diǎn)擊事件 -->

<view class="nav_top" style="border-bottom: 1upx solid lightgray;margin-top: 160px;">

<cc-orderTabs colors="orange" :tabList="tabListTwo" :active="activeTwo"

@tabsClick="tabsClickTwo"></cc-orderTabs>

</view>

</view>

</template>

<script>

export default {

components: {

},

data() {

return {

colors: '#fa436a',

tabList: [{

name: '待付款',

id: 0

}, {

name: '待發(fā)貨',

id: 1

}, {

name: '待收貨',

id: 2

}, {

name: '待評(píng)價(jià)',

id: 3

},

{

name: '已完成',

id: 4

}

],

active: 0,

tabListTwo: [{

name: '食品飲料',

id: 0

}, {

name: '新能源電池',

id: 1

}, {

name: '航空航天',

id: 2

}, {

name: '半導(dǎo)體芯片',

id: 3

}],

activeTwo: 0,

}

},

methods: {

tabsClick(item, index) {

this.active = item.id

},

tabsClickTwo(item, index) {

this.activeTwo = item.id

},

}

}

</script>

<style lang="scss" scoped>

.content {

display: flex;

flex-direction: column;

}

</style>

到了這里，關(guān)于前端Vue自定義商品訂單tabs標(biāo)題欄選項(xiàng)卡組件 可設(shè)置文字下劃線顏色的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！