更新记录

1.0.1（2024-12-04） 下载此版本

1.0.1 全面更新升级，修复不支持vue3问题，已经修复自行修改样式问题，另外添加兼容H5端。（注意：H5和APP端可以通过objectStyle直接修改样式，微信小程序端需要在组件内修改，修改位置已经注明了哈）

1.0.0（2024-02-07） 下载此版本

sevenq-tab组件支持自定义tab样式以及自定义插槽，非常方便用户使用，摆脱以往的大众化tab组件

平台兼容性

sevenq-tab

使用说明

sevenq-tab组件支持自定义tab样式以及自定义插槽，非常方便用户使用，摆脱以往的大众化tab组件。后续版本将会根据用户信息反馈持续迭代更新哈。

注意：如果想要完美使用此组件，需要仔细阅读文档哈，有问题随时评论，看到第一时间回复。

组件传参信息

个别参数解释说明

            tabList: [{//传递几个就显示几个tab栏（一般最多3>tab>2）
                        id: 1,
                        label: '数据报告',
                        icon: "/uni_modules/sevenq-tab/static/system.png"
                    },
                    {
                        id: 2,
                        label: '数据诊断',
                        icon: "/uni_modules/sevenq-tab/static/system.png"
                    },
                    {
                        id: 3,
                        label: '数据复查',
                        icon: "/uni_modules/sevenq-tab/static/system.png"
                    },
                ],
                **------注意事项（当前导入的示例项目是vue3版本哈）------** 
                **自定义tab栏样式 
                 *H5端和APP端传入修改样式即可
                 *微信小程序端需要在组件内部手动修改你需要改成的样式哈
                **

                //1、H5端和APP端可直接传参修改样式 
                objectStyle: {
                    tabHeight: "50px",
                    activeColor: "#ffffff",
                    defaultColor: "#e2e8f8",
                    primaryColor: "#506CEB",
                    borderRadius: '12px'
                }

                //2、微信小程序端需要在组件内css样式类进行修改哈（对应传参）
                    /* #ifdef MP-WEIXIN */
                        $tab-height: 52px;
                        $active-color: #ffffff;
                        $default-color: #e2e8f8;
                        $primary-color: #406CED;
                        $border-radius: 12px;
                    /* #endif */

                //3、vue2项目使用插槽方法示例
                <template v-slot:1>
                    <view class="inner-box">这是tab1的内容</view>
                </template>
                <template v-slot:2>
                    <view class="inner-box">这是tab2的内容</view>
                </template>
                <template v-slot:3>
                    <view class="inner-box">这是tab3的内容</view>
                </template>

                //4、vue3项目使用插槽方法示例（需要+tab）
                <template #tab1>
                <view class="inner-box">这是tab1的内容</view>
                </template>
                <template #tab2>
                    <view class="inner-box">这是tab2的内容</view>
                </template>
                <template #tab3>
                    <view class="inner-box">这是tab3的内容</view>
                </template>

注意： 本组件完全遵守按需导入规则哈，不需要页面单独引入，下载到项目中直接可以使用

页面中使用

<template>
    <view class="content">
        <sevenq-tab :active-tab="activeTab" :tab-list="tabList" :object-style="objectStyle" @change="onTab">
            <template v-slot:1>
                <view class="inner-box">这是tab1的内容</view>
            </template>
            <template v-slot:2>
                <view class="inner-box">这是tab2的内容</view>
            </template>
            <template v-slot:3>
                <view class="inner-box">这是tab3的内容</view>
            </template>
        </sevenq-tab>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                activeTab: 1,
                tabList: [{
                        id: 1,
                        label: '数据报告',
                        icon: "/uni_modules/sevenq-tab/static/system.png"
                    },
                    {
                        id: 2,
                        label: '数据诊断',
                        icon: "/uni_modules/sevenq-tab/static/system.png"
                    },
                    {
                        id: 3,
                        label: '数据复查',
                        icon: "/uni_modules/sevenq-tab/static/system.png"
                    },
                ],
                objectStyle: { 
                    tabHeight: "50px",
                    activeColor: "#ffffff",
                    defaultColor: "#e2e8f8",
                    primaryColor: "#506CEB",
                    borderRadius: '12px'
                }
            };
        },
        methods: {
            onTab(e) {
                this.activeTab = e
            }
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        margin: 20rpx;
    }

    .inner-box {
        width: 100%;
        height: 420rpx;
        background-color: #fff;
        padding: 20rpx;
        border-bottom-left-radius: 24rpx;
        border-bottom-right-radius: 24rpx;
    }
</style>