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

这篇具有很好参考价值的文章主要介绍了前端Vue uni-app简单实用通用标签栏自动换行自适应高度可设置行数可改标签颜色。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

文章来源地址https://www.toymoban.com/news/detail-755222.html

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

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

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

效果图如下:

uniapp自动换行,前端,html,vue.js,javascript,微信小程序,uni-app,前端框架

实现代码如下:

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

#### 使用方法

```使用方法

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



<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;">



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

</view>

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

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



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

</view>

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

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



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

</view>

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

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



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

</view>

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

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



<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>