更新记录

1.0（2023-05-22）

初始化

平台兼容性

cc-tabs 说明 tabs组件，根据文字多少自适应tab项宽度，支持自定义标题栏

HTML代码部分

<template>
    <view class="content">

        <!-- cc-tabs组件，根据文字自适应tab项宽度，支持自定义标题栏 -->
        <view style="margin-top:14px; margin-left: 8px; margin-right: 10px;">
            <!-- spaceLeft设置tabs间距 -->
            <cc-tabs spaceLeft="14"  v-model="industryTabIndex" :tabs="industryTabs" @change="tabChange"></cc-tabs>
        </view>
    </view>
</template>

JS代码 （引入组件 填充数据）

<script>
    import ccTabs from '@/components/cc-tabs.vue';

    export default {
        components: {

            ccTabs

        },
        data() {
            return {
                title: 'Hello',
                industryTabs: [{
                        name: '光伏产业'
                    },
                    {
                        name: '新能源车电池'
                    },
                    {
                        name: '银行金融'
                    },
                    {
                        name: '先进制造业'
                    },
                    {
                        name: '医疗健康'
                    },
                    {
                        name: '食品饮料白酒'
                    },
                    {
                        name: '行业七'
                    },
                    {
                        name: '行业八'
                    }
                ],
                industryTabIndex: 0,

            }
        },
        () {

        },
        methods: {

            tabChange() {
                console.log('切换行业类型 =' + this.industryTabIndex);
            },
        }
    }
</script>

CSS

<style>

    page{

        background-color: #f6f6f6;
    }
    .content {
        display: flex;
        flex-direction: column;

    }

</style>