uniapp开发tab切换组件

<template>
    <div class="tabs">
        <div class="tab cur" :class="{active:active==index}" @click="getactive(index)" v-for="(item,index) in list"
            :key="index"><span>{{ item }}</span>
            <div class="line"></div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "tabs",
        components: {},
        props: {
            list: {
                type: Array,
                default () {
                    return [];
                }
            }
        },
        data() {
            return {
                active: 0
            }
        },
        watch: {},
        mounted() {},
        methods: {
            getactive(e) {
                this.active = e
                this.$emit('getactive', e)
            },
        }
    }
</script>

<style lang="scss" scoped>
    .tabs {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: row;
        width: 690rpx;
        padding-left: 30rpx;
        padding-right: 30rpx;
        height: 120rpx;
        margin: auto;

        .tab {
            font-size: 24rpx;
            font-family: MicrosoftYaHei;
            font-weight: 400;
            color: #000000;
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
            flex-direction: column;

            span {
                font-size: 30rpx;
                font-family: MicrosoftYaHei;
                font-weight: 400;
                color: rgba(#000000, 0.5);
            }

            .line {
                width: 100%;
                height: 5rpx;
                background: rgba(54, 107, 229, 0);
                border-radius: 2rpx;
                margin-top: 10rpx;
            }
        }

        .tab.active {
            span {
                color: rgba(54, 107, 229, 1);
            }

            .line {
                background: rgba(54, 107, 229, 1);
            }
        }
    }
</style>

使用

<tab3 @getactive='getactive' :list='listtab'></tab3>

script

<script>
    import tab3 from '../../components/my/tab3.vue'
    export default {
        components: {
            tab3
        },
        data() {
            return {
                current: 0,
                listtab: ['个人认证', '企业认证']
            };
        },
        methods: {
            getactive(item) {
                this.current = item
            }
        },
    };
</script>