yihuo/components/tabbar3.vue

<template>
    <view class="tabs flex-align-around" :class="[customClass]">
        <view
            v-for="item in tabs"
            :key="item.value"
            class="cell flex-align-center"
            :class="{ active: tab.value === item.value }"
            @click="clickTab(item)"
        >
            {{ item.title }}
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            tabs: Array,
            initial: {
                default: 0,
                type: Number
            },
            customClass: {
                default: '',
                type: String
            }
        },
        data() {
            return {
                tab: this.tabs[this.initial]
            }
        },
        methods: {
            clickTab(item) {
                this.tab = item
                this.$emit('change', item)
            }
        }
    }
</script>
<style lang="scss" scoped>
    .tabs {
        height: 56rpx;
        .cell {
            height: 100%;
            width: 128rpx;
            position: relative;

            font-size: 24rpx;
            color: #999999;

            background: #f3f3f8;
            border-radius: 24rpx 24rpx 0 0;
            &.active {
                color: #000;
                background-color: #fff;
            }
        }
    }
</style>