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

news2024/9/21 5:48:17

在前端开发的世界里，随着业务复杂度的提升和需求的多样化，传统的整体式开发方式已经难以满足快速迭代和高效维护的需求。组件化开发作为一种重要的解决方案，正逐渐受到广大开发者的青睐。本文将结合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>标签内，包括数据、方法、计算属性等。对于我们的等宽标签栏组件，我们需要定义以下属性：