forestry-wx/src/components/ut-tabs-dict/ut-tabs-dict.vue

<template>
    <template v-if="cStyle === 'fill'">
        <up-tabs ref="upTabsRef" class="fill-tabs" :list="tabs" keyName="label" @change="change"
            lineColor="rgba(0,0,0,0)">
            <template #content="{ item, keyName, index }">
                <view class="tab-fill" :style="{ background: index === current ? lineColor : '#F7F7F7' }"
                    :class="{ checked: index === current }">{{ item[keyName] }}</view>
            </template>
        </up-tabs>
    </template>
    <template v-else>
        <up-tabs ref="upTabsRef" :list="tabs" keyName="label" @change="change" :lineWidth="curLineWidth"
            :current="current" :lineHeight="lineHeight" :itemStyle="itemStyle" :lineColor="lineColor"
            :inactiveStyle="inactiveStyle" :activeStyle="activeStyle">
        </up-tabs>
    </template>
</template>
<script setup name="ut-tabs-dict">
import { toRefs, ref, onMounted, watch } from 'vue';
const props = defineProps({
    tabs: {
        type: Array,
        default: () => []
    },
    modelValue: {
        type: String,
        default: ''
    },
    inactiveStyle: {
        type: Object,
        default: () => ({
            color: '#999',
            fontSize: '30rpx'
        })
    },
    activeStyle: {
        type: Object,
        default: () => ({
            color: '#2A6D52',
            fontSize: '30rpx',
            fontWeight: 500
        })
    },
    lineHeight: {
        type: String,
        default: '2px'
    },
    lineWidth: {
        type: String,
        default: '60rpx'
    },
    fontSize: {
        type: String,
        default: '30rpx'
    },
    itemStyle: {
        type: Object,
        default: () => ({
            padding: '10rpx 20rpx'
        })
    },
    isAutoWidth: {
        type: Boolean,
        default: false
    },
    lineColor: {
        type: String,
        default: '#2A6D52'
    },
    cStyle: {
        type: String,
        default: ''
    }
});
const upTabsRef = ref(null);
const emit = defineEmits(['change', 'update:modelValue']);
const change = (item) => {
    emit('update:modelValue', item.value);
    emit('change', item.value);
};
const setCurLineWidthset = (index) => {
    const item = props.tabs[index];
    const width = item?.label?.length * 30;
    curLineWidth.value = width + 'rpx';
};
const curLineWidth = ref(props.lineWidth);
const current = ref(0);
watch(() => props.modelValue, (val) => {
    current.value = props.tabs.findIndex(item => item.value === val);
    if (props.isAutoWidth && current.value !== -1) {
        setCurLineWidthset(current.value);
    }
}, { immediate: true });
</script>
<style lang="scss" scoped>
.tab-fill {
    display: inline-block;
    white-space: nowrap;
    font-size: 26rpx;
    color: #999;
    height: 54rpx;
    line-height: 54rpx;
    padding: 0 16rpx;
    background: #F7F7F7;
    border-radius: 8rpx;

    &.checked {
        background: #2A6D52;
        color: #fff;
    }
}
</style>

<style lang="scss"></style>