forestry-wx/src/components/ut-radio/ut-radio.vue

<template>
    <view class="d-flex gap-20">
        <view v-for="option in options" :key="option.value" :class="{ 'active': modelValue == option.value }" class="pd-20 f-s-26 min-180 text-center radius-10 ut-radio-item" @click="onSelect(option.value)">
            {{ option.label }}
        </view>
    </view>
</template>

<script setup lang="ts">
const props = defineProps({
    options: { type: Array<{label: '', value: '' }>, default: () => [] },
    modelValue: { type: null, default: null },
    disabled: { type: Boolean, default: false },
});

const emit = defineEmits<{
    (e: 'update:modelValue', value: any): void;
    (e: 'change', value: any): void;
}>();

const onSelect = (value: any) => {
    if (props.disabled) return;
    if (value === props.modelValue) return;
    emit('update:modelValue', value);
    emit('change', value);
};
</script>

<style scoped lang="scss">
.ut-radio-item {
    background-color: #F2F2F2;
    &.active {
        color: #fff;
        background-color: $u-primary;
    }
}
</style>