隨著技術(shù)的發(fā)展，開(kāi)發(fā)的復(fù)雜度也越來(lái)越高，傳統(tǒng)開(kāi)發(fā)方式將一個(gè)系統(tǒng)做成了整塊應(yīng)用，經(jīng)常出現(xiàn)的情況就是一個(gè)小小的改動(dòng)或者一個(gè)小功能的增加可能會(huì)引起整體邏輯的修改，造成牽一發(fā)而動(dòng)全身。通過(guò)組件化開(kāi)發(fā)，可以有效實(shí)現(xiàn)單獨(dú)開(kāi)發(fā)，單獨(dú)維護(hù)，而且他們之間可以隨意的進(jìn)行組合。大大提升開(kāi)發(fā)效率低，降低維護(hù)成本。
?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-755222.html
組件化對(duì)于任何一個(gè)業(yè)務(wù)場(chǎng)景復(fù)雜的前端應(yīng)用以及經(jīng)過(guò)多次迭代之后的產(chǎn)品來(lái)說(shuō)都是必經(jīng)之路。組件化要做的不僅僅是表面上看到的模塊拆分解耦，其背后還有很多工作來(lái)支撐組件化的進(jìn)行，例如結(jié)合業(yè)務(wù)特性的模塊拆分策略、模塊間的交互方式和構(gòu)建系統(tǒng)等等 。
本文給大家介紹的一款組件是：
前端Vue uni-app簡(jiǎn)單實(shí)用通用標(biāo)簽欄自動(dòng)換行 自適應(yīng)高度 可設(shè)置行數(shù) 可改標(biāo)簽顏色：
效果圖如下:
?文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-755222.html
實(shí)現(xiàn)代碼如下:
# ccTag簡(jiǎn)單實(shí)用通用標(biāo)簽欄自動(dòng)換行 自適應(yīng)高度 可設(shè)置行數(shù) 可改標(biāo)簽顏色
#### 使用方法
```使用方法
<view style="width: 100vw;">
<!-- tagList:標(biāo)簽數(shù)組 @click:點(diǎn)擊標(biāo)簽事件 自動(dòng)攜帶數(shù)據(jù) rowNum:顯示行數(shù)1 color:文字顏色 bgColor:背景顏色 -->
<ccTagList :tagList="tagListOne" rowNum="1" @click="goTagClick" bgColor="#F6F6F6" color="green"></ccTagList>
</view>
```
#### HTML代碼部分
```html
<template>
<view class="content">
<view class="titleV">自動(dòng)換行設(shè)置1行標(biāo)簽欄(可改標(biāo)簽顏色)</view>
<view style="width: 100vw;">
<!-- tagList:標(biāo)簽數(shù)組 @click:點(diǎn)擊標(biāo)簽事件 自動(dòng)攜帶數(shù)據(jù) rowNum:顯示行數(shù)1 color:文字顏色 bgColor:背景顏色 -->
<ccTagList :tagList="tagListOne" rowNum="1" @click="goTagClick" bgColor="#F6F6F6" color="green"></ccTagList>
</view>
<view class="titleV">自動(dòng)換行設(shè)置2行標(biāo)簽欄(可改標(biāo)簽顏色)</view>
<view style="width: 100vw;">
<!-- tagList:標(biāo)簽數(shù)組 @click:點(diǎn)擊標(biāo)簽事件 自動(dòng)攜帶數(shù)據(jù) rowNum:顯示行數(shù)2 -->
<ccTagList :tagList="tagListOne" rowNum="2" @click="goTagClick"></ccTagList>
</view>
<view class="titleV">自動(dòng)換行設(shè)置3行標(biāo)簽欄(可改標(biāo)簽顏色)</view>
<view style="width: 100vw;">
<!-- tagList:標(biāo)簽數(shù)組 @click:點(diǎn)擊標(biāo)簽事件 自動(dòng)攜帶數(shù)據(jù) rowNum:顯示行數(shù)1 -->
<ccTagList :tagList="tagListOne" rowNum="3" color="red" @click="goTagClick"></ccTagList>
</view>
<view class="titleV">自動(dòng)換行設(shè)置4行標(biāo)簽欄(可改標(biāo)簽顏色)</view>
<view style="width: 100vw;">
<!-- tagList:標(biāo)簽數(shù)組 @click:點(diǎn)擊標(biāo)簽事件 自動(dòng)攜帶數(shù)據(jù) rowNum:顯示行數(shù)2 -->
<ccTagList :tagList="tagListOne" rowNum="4" color="orange" @click="goTagClick"></ccTagList>
</view>
<view class="titleV">自動(dòng)換行自適應(yīng)高度標(biāo)簽欄(可改標(biāo)簽顏色)</view>
<view style="width: 100vw;">
<!-- tagList:標(biāo)簽數(shù)組 @click:點(diǎn)擊標(biāo)簽事件 自動(dòng)攜帶數(shù)據(jù) rowNum:顯示行數(shù) 0不限制 -->
<ccTagList :tagList="tagListOne" @click="goTagClick"></ccTagList>
</view>
</view>
</template>
```
#### JS代碼 （引入組件 填充數(shù)據(jù)）
```javascript
<script>
import ccTagList from '../../components/CCTagList.vue'
export default {
components:{
ccTagList
},
data() {
return {
title: 'Hello',
tagListOne:['標(biāo)簽一','標(biāo)簽二','標(biāo)簽三','標(biāo)簽四','標(biāo)簽五','標(biāo)簽六','標(biāo)簽七','標(biāo)簽八','標(biāo)簽九','標(biāo)簽十', '標(biāo)簽十一','標(biāo)簽十二','標(biāo)簽十三','標(biāo)簽十四','標(biāo)簽十五','標(biāo)簽十六','標(biāo)簽十七','標(biāo)簽十八','標(biāo)簽十九','標(biāo)簽二十','標(biāo)簽二十一','標(biāo)簽二十二','標(biāo)簽二十三','標(biāo)簽二十四']
}
},
methods: {
goTagClick(item){
uni.showModal({
title:'溫馨提示',
content:'點(diǎn)擊的tag條目數(shù)據(jù): ' + item
})
}
}
}
</script>
```
#### CSS
<style>
.content {
display: flex;
flex-direction: column;
justify-content: center;
}
.titleV {
? font-size: 14px;
? margin-top: 16px;
? margin-left: 16px;
? height: 20px;
? font-weight: 550;
}
</style>
```
閱讀全文下載完整組件代碼請(qǐng)關(guān)注微信公眾號(hào)： 前端組件開(kāi)發(fā)
?
?
?
到了這里，關(guān)于前端Vue uni-app簡(jiǎn)單實(shí)用通用標(biāo)簽欄自動(dòng)換行 自適應(yīng)高度 可設(shè)置行數(shù) 可改標(biāo)簽顏色的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
