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

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

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

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

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

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

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

效果图如下:

 

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

uniapp自动换行,前端,html,vue.js,javascript,微信小程序,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>

```

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

 

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

 

 

到了这里,关于前端Vue uni-app简单实用通用标签栏自动换行 自适应高度 可设置行数 可改标签颜色的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端vue uni-app cc-countdown倒计时组件

    随着技术的不断发展,传统的开发方式使得系统的复杂度越来越高。在传统开发过程中,一个小小的改动或者一个小功能的增加可能会导致整体逻辑的修改,造成牵一发而动全身的情况。为了解决这个问题,我们采用了组件化的开发模式。通过组件化开发,可以有效地实现单

    2024年02月15日
    浏览(22)
  • uni-app 前端项目(vue)部署到本地win系统Nginx上 http

     背景: 若依移动端的项目:整合了uview开源ui框架 部署流程 1. 配置后端请求接口基本路径地址: 2. 打包复制到nginx下:nginx/htm/newxss, (newxss目录手动创建) 3.在nginx上配置了站点与api代理  Nginx配置 安装个稳定版本的:nginx-1.24.0 部署配置: 1.增加了网站: 8083端口 的, 网站

    2024年04月12日
    浏览(14)
  • 前端vue uni-app百度地图定位组件,显示地图定位,标记点,并显示详细地址

    快速实现前端百度地图定位组件,显示地图定位,标记点,并显示详细地址; 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下:     代码如下: # 百度地图定位组件,显示地图定位,标记点,并显示详细地址 #### 使用方法 ```使用方法 #安装vue-baidu-map插件

    2024年02月08日
    浏览(35)
  • 前端vue uni-app多图片上传组件,支持单个文件,多个文件上传 步骤条step使用

    快速实现多图片上传组件,支持单个文件,多个文件上传 步骤条step使用; 阅读全文下载完整代码请关注微信公众号: 前端组件开发 效果图如下: 使用方法   使用方法 HTML代码部分   html JS代码 (引入组件 填充数据)   javascript

    2024年02月08日
    浏览(38)
  • 分享一种针对uni-app相对通用的抓包方案

    近年来混合开发APP逐渐成为主流的开发模式,与传统的开发模式相比混合开发极大的提升了开发效率,同时跨平台的特性也降低了开发成本,一直以来混合开发被诟病的性能问题随着技术的发展也得到改善。技术的发展往往是一把双刃剑,混合开发模式的出现导致“一次编码

    2024年02月11日
    浏览(22)
  • 使用uni-app写小程序,解析含有html标签的富文本

    最近在改一个项目,将html+js+css的项目改成小程序,我说使用的uni来写的,其中遇到一个问题,就是需要解析富文本,在vue中可以直接使用v-html, 但是小程序中的标签都是view,text以及image等,该怎么办呢 于是在uni官网找到插件u-parse dangquestion.question是需要展示的富文本字符串

    2024年02月06日
    浏览(14)
  • 前端-vscode中开发uni-app

    node -v npm install @vue/ cli@4.5.15 -g 指定版本号:4.5.15 在自己电脑目录下创建项目: demo02是自己项目名字 在D/AllCode/vs_vue2_uniapp目录下执行一下命令: vue create -p dcloudio/uni-preset-vue demo02 要想在vscode执行npm命令 我们打开pages.json和manifest.json,发现会报红,这是因为在json中是不能写注

    2024年01月18日
    浏览(42)
  • UNI-APP 人脸识别分析及实现(前端)

    实现流程: 1、打开摄像头——自动读取照片——传输给后端——后端交由第三发或自主开发来识别——返回结果(相识度比) 2、打开摄像头——自动读取视频——传输给后端——后端通过解析视频,截取图片交由第三发或自主开发来识别——返回结果(相识度比) 通过分

    2023年04月08日
    浏览(20)
  • uni-app简单实现一下拖拽排序

    闲来无事,就想着写个拖拽排序的组件好了,虽然效果差了些,但以后我变强了,在优化嘛。🤪 示例: 创建组件(直接上代码): 引入组件: 在之前的基础上优化了下,使用插槽自定义内容

    2024年02月12日
    浏览(17)
  • 语法速通 uni-app随笔【uni-app】【微信小程序】【vue】

    其中, pages 目录/ index 目录【必有】: index.js 编写业务逻辑 【初始数据,生命周期函数】 index.json 编写配置 index.wxml 编写模板 【可理解为本页html】 index.wxss 【可理解为本页css】 直接输入敲回车,连尖括号都不需要就可以标签补全 1)初始数据写死 在 index.wxml 引入变

    2024年02月12日
    浏览(24)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包