前端Vue组件化实践:打造自定义等宽tabs标签组件

在前端开发的世界里,随着业务复杂度的提升和需求的多样化,传统的整体式开发方式已经难以满足快速迭代和高效维护的需求。组件化开发作为一种重要的解决方案,正逐渐受到广大开发者的青睐。本文将结合Vue框架,探讨如何通过组件化开发实现一个自定义等宽标签栏,并分享其在实际业务场景中的应用。

一、组件化开发的必要性与优势

在传统的开发模式中,一个系统往往被设计成一个整体的应用,这种方式的缺点是显而易见的:一旦某个部分需要修改或增加新功能,可能会牵一发而动全身,导致整个系统的逻辑都需要重新调整。这不仅降低了开发效率,也增加了维护成本。

组件化开发的出现,为这一问题提供了有效的解决方案。通过将系统拆分成多个独立的组件,我们可以实现单独开发、单独维护,并且这些组件之间可以灵活地组合和复用。这不仅提高了开发效率,也使得系统的维护和扩展变得更加容易。

二、Vue组件化实践:自定义等宽tabs标签栏组件

效果图如下:

图片

图片

图片

使用方法
<!-- tabArr:标签数组 current:当前选择序列  tabClick:tab点击事件-->
<cc-chooseTab :tabArr="tabArr" :current="myCurrent" @tabClick="tabClick"></cc-chooseTab>                    
HTML代码实现部分
<template><view class="page"><!-- tabArr:标签数组 current:当前选择序列  tabClick:tab点击事件--><cc-chooseTab :tabArr="tabArr" :current="myCurrent" @tabClick="tabClick"></cc-chooseTab><image style="width: 92vw;margin-left: 4vw; margin-top: 60px;" mode="aspectFill" :src="srcArr[myCurrent]"></image><cc-botToolBar @click="botMenuClick"></cc-botToolBar></view>
</template><script>export default {data() {return {myCurrent: 0,// 新时代大湾区港澳台湾tabArr: ["新时代", "大湾区", "港澳台湾", "暖新闻"],srcArr: ["../../static/content1.png", "../../static/content2.png", "../../static/content3.png","../../static/content4.png"]};},methods: {tabClick(flag) {this.myCurrent = flag;console.log("点击tab序列 = " + flag);this.mySrc = this.srcArr[this.myCurrent];},botMenuClick(flag) {console.log("底部菜单按钮点击序列 = " + flag);}}}<style scoped lang="scss">page {padding-bottom: 70px;}
</style>

接下来,我们将以Vue框架为基础,实现一个自定义等宽标签栏组件。这个组件可以根据传入的标签数组动态生成标签栏,并且支持点击事件和当前选中标签的展示。

首先,我们需要定义组件的模板和样式。在Vue中,组件的模板通常使用HTML和Vue的模板语法编写,而样式则可以使用CSS或预处理器如Sass、Less等。对于等宽标签栏,我们需要确保每个标签的宽度相同,并且标签栏整体居中显示。

接下来,我们需要实现组件的逻辑部分。在Vue中,组件的逻辑通常写在<script>标签内,包括数据、方法、计算属性等。对于我们的等宽标签栏组件,我们需要定义以下属性:

  • tabArr:标签数组,用于动态生成标签栏的标签。

  • current:当前选中的标签的索引。

  • tabClick:标签点击事件,当用户点击某个标签时触发。

在组件内部,我们需要根据tabArr动态渲染标签,并为每个标签绑定点击事件。当用户点击某个标签时,我们需要更新current的值,并触发tabClick事件。

三、组件的使用与扩展

完成组件的开发后,我们就可以在父组件或页面中引用和使用它了。在Vue中,我们可以使用<component-name>的形式来引用组件,并通过属性传递数据,通过事件监听来处理组件内部的事件。

例如,我们可以在父组件中定义一个标签数组tabArr和一个当前选中的标签索引myCurrent,然后将它们作为属性传递给等宽标签栏组件。同时,我们还需要定义一个方法来处理标签点击事件。

除了基本的使用方式外,我们还可以根据实际需求对组件进行扩展和定制。例如,我们可以为标签栏添加更多的样式选项,或者为标签添加图标、提示信息等。

四、总结与展望

通过组件化开发,我们可以将复杂的系统拆分成多个独立的组件,实现单独开发、单独维护,并且可以灵活地组合和复用这些组件。这不仅提高了开发效率,也使得系统的维护和扩展变得更加容易。

在本文中,我们结合Vue框架实现了一个自定义等宽标签栏组件,并介绍了其在实际业务场景中的应用。当然,组件化开发并不仅仅局限于标签栏这样的简单组件,它还可以应用于更复杂的业务场景和系统中。未来,我们将继续探索和实践组件化开发,为前端开发带来更多的便利和可能性。

组件下载地址:

https://ext.dcloud.net.cn/plugin?id=13170

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/376661.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【调试笔记-20240713-Windows-Tauri 多个HTML页面支持】

调试笔记-系列文章目录 调试笔记-20240713-Windows-Tauri 多个HTML页面支持 文章目录 调试笔记-系列文章目录调试笔记-20240713-Windows-Tauri 多个HTML页面支持 前言一、调试环境操作系统&#xff1a;Windows 10 专业版调试环境调试目标 二、调试步骤搜索相似问题 三、应用场…

BUCK电源芯片,电气参数,极限参数,工作特性,引脚功能

概述 在应用DC-DC开关电源芯片时&#xff0c;通常需要关注以下参数&#xff0c;同步与非同步&#xff0c;输入电压&#xff0c;输入电流&#xff0c;输出电压&#xff0c;输出电流&#xff0c;输入输出电容的选择&#xff1b;mosfet选型&#xff0c;电感选型&#xff0c;功耗&a…

数据结构(初阶2.顺序表)

文章目录 一、线性表 二、顺序表 2.1 概念和结构 2.2 分类 2.2.1 静态顺序表 2.2.2 动态顺序表 2.3动态顺序表的实现 1.SeqList.h 2.SeqList.c 打印顺序表 初始化 销毁 增容 尾插 头插 在指定位置之前插入数据 尾删 头删 在指定位置删除数据 3.test.c 一、线性表 线性表&#…

git安装使用gitlab

第一步&#xff1a;下载git 第二步&#xff1a;安装 第三步&#xff1a;配置sshkey 第四步&#xff1a;处理两台电脑的sshkey问题 第一步下载git 网址&#xff1a;Git点Downloads根据你的操作系统选择对应的版本&#xff0c;我的是Windows&#xff0c;所以我选择了Windows …

Java的高级特性

类的继承 继承是从已有的类中派生出新的类&#xff0c;新的类能拥有已有类的属性和行为&#xff0c;并且可以拓展新的属性和行为 public class 子类 extends 父类{子类类体 } 优点 代码的复用 提高编码效率 易于维护 使类与类产生关联&#xff0c;是多态的前提 缺点 类缺乏独…

计算机图形学入门28:相机、透镜和光场

1.前言 相机(Cameras)、透镜(Lenses)和光场(Light Fields)都是图形学中重要的组成部分。在之前的学习中&#xff0c;都是默认它们的存在&#xff0c;所以现在也需要单独拿出来学习下。 2.成像方法 计算机图形学有两种成像方法&#xff0c;即合成(Synthesis)和捕捉(Capture)。前…

JVM:类加载器

文章目录 一、什么是类加载器二、类加载器的应用场景三、类加载器的分类1、分类2、启动类加载器3、Java中的默认类加载器&#xff08;1&#xff09;扩展类加载器&#xff08;2&#xff09;应用程序类加载器&#xff08;3&#xff09;arthas中类加载器相关的功能 四、双亲委派机…

78. UE5 RPG 创建技能数据并初始化技能ui

在上一篇文章里&#xff0c;我们创建了技能的UI&#xff0c;接下来&#xff0c;我们要考虑如何实现对技能UI的填充&#xff0c;肯定不能直接写死&#xff0c;需要有一些方法去实现技能的更新。我们期望能够创建一个技能数据&#xff0c;然后根据数据通过回调的方式实现数据的更…

【经典面试题】是否形成有环链表

1.环形链表oj 2. oj解法 利用快慢指针&#xff1a; /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/typedef struct ListNode ListNode; bool hasCycle(struct ListNode *head) {ListNode* slow head, *fast…

UNIAPP_ReferenceError: TextEncoder is not defined 解决

错误信息 1、安装text-decoding npm install text-decoding2、main.js import { TextEncoder, TextDecoder } from text-decoding global.TextEncoder TextEncoder global.TextDecoder TextDecoder

【网络安全】Oracle:SSRF获取元数据

未经许可&#xff0c;不得转载。 文章目录 前言正文漏洞利用 前言 Acme 是一家广受欢迎的播客托管公司&#xff0c;拥有庞大的客户群体。与许多大型运营公司一样&#xff0c;Acme 采用了Apiary的服务&#xff0c;使用户能够安全高效地管理他们的播客。 Apiary 于2017年初被Or…

Java SpringBoot 若依 后端实现评论“盖楼“,“楼中楼“功能 递归查询递归组装评论结构

效果图 数据库设计 还可以使用路径模块 一级评论id,二级评论id, 用like最左匹配原则查询子评论 因为接手遗留代码&#xff0c;需要添加字段&#xff0c;改动数据库&#xff0c;我就不改动了&#xff0c;导致我下面递归查询子评论不是很好。 业务代码 Overridepublic List<S…

OpenCV漫水填充函数floodFill函数的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 功能描述 ffloodFill函数是OpenCV库中用于图像处理的一个功能&#xff0c;它用于填充与种子点颜色相近的连通区域。这个函数在很多场景下都非常有用&#x…

电子电气架构 --- 关于DoIP的一些闲思 上

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是你的不对。非必要不费力证明自己,无利益不试图说服别人,是精神上的节…

上传图片,base64改为文件流,并转给后端

需求&#xff1a; html代码&#xff1a; <el-dialog v-model"dialogPicVisible" title"新增图片" width"500"><el-form :model"picForm"><el-form-item label"图片名称&#xff1a;" :label-width"10…

【数组、特殊矩阵的压缩存储】

目录 一、数组1.1、一维数组1.1.1 、一维数组的定义方式1.1.2、一维数组的数组名 1.2、二维数组1.2.1、二维数组的定义方式1.2.2、二维数组的数组名 二、对称矩阵的压缩存储三、三角矩阵的压缩存储四、三对角矩阵的压缩存储五、稀疏矩阵的压缩存储 一、数组 概述&#xff1a;数…

基于Vue和UCharts的前端组件化开发:实现高效、可维护的词云图与进度条组件

基于Vue和UCharts的前端组件化开发&#xff1a;实现高效、可维护的词云图与进度条组件 摘要 随着前端技术的迅速发展和业务场景的日益复杂&#xff0c;传统的整块应用开发方式已无法满足现代开发的需求。组件化开发作为一种有效的解决方案&#xff0c;能够将系统拆分为独立、…

SpringCoud组件

一、使用SpringCloudAlibaba <dependencyManagement><dependencies><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-alibaba-dependencies</artifactId><version>2023.0.1.0</version><…

纯净IP的重要性解析与测评分析

作为连接互联网世界的桥梁&#xff0c;IP地址的纯净度不仅关乎网络访问的速度与稳定性&#xff0c;更是影响着数据安全与隐私保护。今天&#xff0c;我们将带您深入探索纯净IP的重要性&#xff0c;并分享我们对芝麻HTTP与巨量IP这两家提供纯净SOCKS5代理服务的深度测评分析。 一…

ESP32的I2S引脚及支持的音频标准使用说明

ESP32 I2S 接口 ESP32 有 2 个标准 I2S 接口。这 2 个接口可以以主机或从机模式&#xff0c;在全双工或半双工模式下工作&#xff0c;并且可被配置为 8/16/32/48/64-bit 的输入输出通道&#xff0c;支持频率从 10 kHz 到 40 MHz 的 BCK 时钟。当 1 个或 2 个 被配置为主机模式…