digital-medicine-front/src/views/models/BtnRadio.vue

<template>
    <div class="btn-radio-wrap d-flex f-w-w">
        <template v-for="item in options" :key="item.value">
            <div class="btn-radio-item" @click="change(item.value)" :class="{ checked: item.value === activeName }">
                <template v-if="isNum"> {{ item.label }}（{{ item.count }}） </template>
                <template v-else> {{ item.label }} </template>
            </div>
        </template>
    </div>
</template>
<script setup name="searchTabs" lang="ts">
import { propTypes } from '@/utils/propTypes';
const emit = defineEmits(['update:modelValue', 'change']);
const activeName = ref('');
const props = defineProps({
    modelValue: propTypes.string.def(''),
    options: propTypes.any.def([]),
    isNum: propTypes.bool.def(false)
});
const change = (event: any) => {
    activeName.value = event;
    emit('update:modelValue', event);
    emit('change', event);
};
watch(
    () => props.modelValue,
    async (val) => {
        if (val) {
            activeName.value = val as string;
        }
    },
    { deep: true, immediate: true }
);
</script>
<style lang="scss" scoped>
.btn-radio-wrap {

    .btn-radio-item {
        box-sizing: border-box;
        padding: 0 20px;
        height: 40px;
        line-height: 38px;
        color: #333;
        font-size: 14px;
        border: 1px solid var(--base-radio-border-color);
        border-radius: 4px;
        margin: 0 20px 20px 0;
        cursor: pointer;
        user-select: none;

        &.checked {
            background-color: var(--el-color-primary);
            color: #fff;
            border-color: var(--el-color-primary);
        }
    }
   
}
</style>