前端Vue uni-app简单实用通用标签栏自动换行 自适应高度 可设置行数 可改标签颜色

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

 

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。

本文给大家介绍的一款组件是：

前端Vue uni-app简单实用通用标签栏自动换行 自适应高度 可设置行数 可改标签颜色：

效果图如下:

 

实现代码如下:

# ccTag简单实用通用标签栏自动换行 自适应高度 可设置行数 可改标签颜色

#### 使用方法

```使用方法

<view style="width: 100vw;">

<!-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数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">自动换行设置1行标签栏(可改标签颜色)</view>

<view style="width: 100vw;">

<!-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数1 color:文字颜色 bgColor:背景颜色 -->

<ccTagList :tagList="tagListOne" rowNum="1" @click="goTagClick" bgColor="#F6F6F6" color="green"></ccTagList>

</view>

<view class="titleV">自动换行设置2行标签栏(可改标签颜色)</view>

<view style="width: 100vw;">

<!-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数2 -->

<ccTagList :tagList="tagListOne" rowNum="2" @click="goTagClick"></ccTagList>

</view>

<view class="titleV">自动换行设置3行标签栏(可改标签颜色)</view>

<view style="width: 100vw;">

<!-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数1 -->

<ccTagList :tagList="tagListOne" rowNum="3" color="red" @click="goTagClick"></ccTagList>

</view>

<view class="titleV">自动换行设置4行标签栏(可改标签颜色)</view>

<view style="width: 100vw;">

<!-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数2 -->

<ccTagList :tagList="tagListOne" rowNum="4" color="orange" @click="goTagClick"></ccTagList>

</view>

<view class="titleV">自动换行自适应高度标签栏(可改标签颜色)</view>

<view style="width: 100vw;">

<!-- tagList:标签数组 @click:点击标签事件 自动携带数据 rowNum:显示行数 0不限制 -->

<ccTagList :tagList="tagListOne" @click="goTagClick"></ccTagList>

</view>

</view>

</template>

```

#### JS代码 （引入组件 填充数据）

```javascript

<script>

import ccTagList from '../../components/CCTagList.vue'

export default {

components:{

ccTagList

},

data() {

return {

title: 'Hello',

tagListOne:['标签一','标签二','标签三','标签四','标签五','标签六','标签七','标签八','标签九','标签十', '标签十一','标签十二','标签十三','标签十四','标签十五','标签十六','标签十七','标签十八','标签十九','标签二十','标签二十一','标签二十二','标签二十三','标签二十四']

}

},

methods: {

goTagClick(item){

uni.showModal({

title:'温馨提示',

content:'点击的tag条目数据: ' + 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>

```

阅读全文下载完整组件代码请关注微信公众号： 前端组件开发