yihuo/components/tabbar.vue

<template>
    <view class="tabBox" :class="[customClass]">
        <view
            v-for="(item, index) in data"
            :key="index"
            class="relative item"
            @click="click(index)"
        >
            <view
                class="font4 paddingY12 text"
                :class="[activeTab == index ? activeClass : inactiveClass]"
            >
                {{ getStr(item) }}
            </view>
            <view v-if="activeTab == index" class="line"></view>
        </view>
    </view>
</template>
<script>
    export default {
        props: {
            customClass: String,
            initial: {
                default: 0,
                type: Number
            },
            around: {
                default: true,
                type: Boolean
            },
            data: Array,
            labelKey: {
                default: 'label',
                type: String
            },
            valueKey: {
                default: 'label',
                type: String
            },
            inactiveClass: {
                default: 'color-white',
                type: String
            },
            activeClass: {
                default: 'active-text',
                type: String
            },
            lineBottom: {
                default: 0,
                type: Number
            }
        },
        data() {
            return {
                activeTab: 0
            }
        },
        mounted() {
            this.activeTab = this.initial
        },
        methods: {
            getStr(item) {
                return typeof item === 'string' ? item : item[this.labelKey]
            },
            click(index) {
                this.activeTab = index
                this.$emit('change', index)
            },
            change(index) {
                this.click(index)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .tabBox {
        overflow: auto;
        word-break: keep-all;
        white-space: nowrap;
    }
    .item {
        font-size: 28rpx;
        color: #999999;
        margin-right: 50rpx;
        position: relative;
        display: inline-block;
        z-index: 10;
        .text {
            color: #999999;
            z-index: 10;
        }
        .active-text {
            color: #000000;
            font-weight: bold;
            position: relative;
            font-size: 28rpx;
            z-index: 1;
        }
    }

    .line {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 20rpx;
        // width: 80rpx;
        height: 16rpx;
        z-index: 0;
        background: #fec433;
    }
</style>