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

效果图如下:

实现代码如下:

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代码部分

<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代码 （引入组件 填充数据）

<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

.content { display: flex; flex-direction: column; justify-content: center; } .titleV {   font-size: 14px;   margin-top: 16px;   margin-left: 16px;   height: 20px;   font-weight: 550; }

附下载完整代码地址：

https://mp.weixin.qq.com/s?__biz=MzkxMDUwMTE3MQ==&mid=2247483819&idx=4&sn=aed3be265aca7df0808c607ec5db13aa&chksm=c12b35f7f65cbce131e89fa89ee0da3c807c7c051820b56684e3d52d6da71e76ab70099baabb#rd