前端ccTag简单实用通用标签栏自动换行 自适应高度 可设置行数 可改标签颜色：https://ext.dcloud.net.cn/plugin?id=12812
效果图如下:
实现代码如下:
# 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>
```
网友评论