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

<template>
    <view class="tabs-box">
        <u-tabs class="tabs" :list="list" lineWidth="30" lineColor="#f56c6c" :activeStyle="{
            color: '#303133',
            fontWeight: 'bold',
            transform: 'scale(1.05)'
        }" :inactiveStyle="{
            color: '#606266',
            transform: 'scale(1)'
        }" itemStyle="padding-left: 10px; padding-right: 10px; height: 34px;" @click="handleTabClick">
        </u-tabs>
    </view>

</template>

<script setup lang="ts">
interface TabItem {
    name: string;
    badge?: {
        isDot?: boolean;
        value?: number | string;
    };
    [key: string]: any;
}

interface Props {
    list: TabItem[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
    (e: 'click', item: TabItem, index: number): void;
}>();

const handleTabClick = (item: TabItem, index: number) => {
    emit('click', item, index);
};
</script>

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

.tabs-box {
    width: 100%;
    height: px2rpx(34);
    position: relative;
    .tabs {
        width: 100%;
        position: absolute;
        left: -px2rpx(10);
    }
}
</style>