前端Vue自定义等宽标签栏标题栏选项卡

前端组件化开发：以cc-chooseTab组件为例

随着技术的发展，开发的复杂度也越来越高。传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。为了解决这个问题，前端开发社区提出了组件化开发的理念。通过组件化开发，可以将大型应用分解为一系列独立且可复用的组件，每个组件可以单独开发、测试、维护，并且可以随意组合，大大提高了开发效率和可维护性。

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

本文将通过介绍一个前端Vue组件——cc-chooseTab，来深入探讨前端组件化开发的应用和实践。

cc-chooseTab组件介绍

cc-chooseTab是一个自定义的等宽标签栏标题栏选项卡组件，它可以方便地在uni-app平台上实现标签栏和标题栏的选项卡功能。通过引入和使用该组件，开发者能够快速实现标签栏和标题栏的选项卡功能，提高用户体验和开发效率。

 

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

 

效果图如下：

 

使用方法

使用cc-chooseTab组件非常简单，只需按照以下步骤进行操作：

1. 在uni-app项目中的需要使用该组件的页面中引入cc-chooseTab组件。

<!-- tabArr:标签数组 current：当前选择序列  tabClick：tab点击事件-->

<cc-chooseTab :tabArr="tabArr" :current="myCurrent" @tabClick="tabClick"></cc-chooseTab>

```

1. 在父组件中定义tabArr数据属性，用于存储标签栏的选项卡数据。每个对象包含label和pagePath两个属性，分别表示选项卡的标签和对应的页面路径。
2. 在父组件中定义myCurrent数据属性，用于存储当前选择序列。
3. 在父组件中实现tabClick方法，该方法将在用户点击标签栏的某个选项卡时触发。在tabClick方法中，可以获取到用户选择的选项卡序列数组，并执行相应的操作。

下面是一个示例父组件的代码：

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

}

}

}

</script>

<style scoped lang="scss">

page {

padding-bottom: 70px;

}

</style>

在父组件中定义了tabArr、myCurrent和tabClick等数据属性和方法，并通过引入和使用cc-chooseTab组件实现了标签栏和标题栏的选项卡功能。在用户点击标签栏的某个选项卡时，会触发tabClick方法，获取到用户选择的选项卡序列数组，并执行相应的操作。

结合业务特性的模块拆分策略

对于cc-chooseTab组件来说，结合业务特性的模块拆分策略主要是根据具体的标签栏和标题栏的选项卡需求进行划分。比如，可以将组件拆分为标签栏展示模块、标题栏展示模块、选项卡点击事件处理模块等。每个模块可以独立开发、测试、维护，并且可以随意组合，提高了开发效率和可维护性。

模块间的交互方式

在组件化开发中，模块间的交互方式也是非常重要的一环。对于cc-chooseTab组件来说，模块间的交互主要是通过事件传递数据。比如，当用户点击标签栏的某个选项卡时，会触发一个名为@tabClick的事件，将用户选择的选项卡序列数组传递给父组件或其他相关的组件。这种事件驱动的交互方式使得组件之间的通信更加清晰和易于管理。

构建系统

构建系统是组件化开发中的重要一环，它可以提高开发效率和代码的可维护性。对于cc-chooseTab组件来说，可以使用Vue CLI等构建工具来构建该组件，并且可以通过uni-app插件市场发布该组件，供其他人使用。通过构建系统，可以将组件的代码进行优化和压缩，提高代码的性能和可读性。

总结

组件化开发是前端开发的重要趋势，能够提高开发效率和可维护性。