gypsy-crm-frontend-vu/components/cwg-tabs.vue

<template>
    <view class="tabs-box">
        <view class="tab-title cwg-cursor" v-for="(row, index) in tabs" :key="index" @click="handleTabClick(index)"
            :class="{ active: props.cativeIndex == index }">
            <cwg-icon v-if="row.icon" :name="row.icon" :size="16"
                :color="props.cativeIndex == index ? '#fff' : '#333'" />
            <text>{{ row.name }}</text>
        </view>
    </view>
</template>

<script setup lang="ts">
const props = defineProps({
    cativeIndex: {
        type: Number,
        default: 0
    },
    tabs: {
        type: Array,
        default: () => ([])
    }
})
const emit = defineEmits(['update:cativeIndex', 'tabClick'])

const handleTabClick = (index: number) => {
    emit('update:cativeIndex', index);
    emit('tabClick', index);
};
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.tabs-box {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;

    .tab-title {
        flex: 1;
        display: flex;
        align-items: center;
        gap: px2rpx(4);
        border: 1px solid #f3f4f6;
        font-size: px2rpx(16);
        padding: px2rpx(8) px2rpx(12);
        border-radius: px2rpx(2);
        background-color: var(--bs-bg-color);
        justify-content: center;
        color: var(--bs-emphasis-color);
    }

    .active {
        background-color: var(--color-error);
        color: #fff;
        border: 1px solid var(--bs-bg-color);
    }
}
</style>