shanxia2.0/miniprogram/components/db-ui/db-radio-group.vue

<template>
  <view class="db-radio-group">
    <view
      v-for="opt in options"
      :key="opt.value"
      class="db-radio"
      :class="{ 'db-radio--active': modelValue === opt.value, 'db-radio--disabled': disabled }"
      @click="onPick(opt.value)"
    >
      <view class="db-radio__dot" />
      <text>{{ opt.label }}</text>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  modelValue: String,
  disabled: Boolean,
  options: {
    type: Array,
    default: () => [
      { label: '入库', value: '入库' },
      { label: '出库', value: '出库' }
    ]
  }
})
const emit = defineEmits(['update:modelValue', 'change'])

function onPick(v) {
  if (props.disabled) return
  emit('update:modelValue', v)
  emit('change', v)
}
</script>

<style scoped>
.db-radio-group {
  display: flex;
  gap: 16px;
}
.db-radio {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #323233;
}
.db-radio__dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1px solid #c8c9cc;
  box-sizing: border-box;
}
.db-radio--active .db-radio__dot {
  border-color: #52b788;
  background: radial-gradient(circle, #52b788 0 45%, transparent 50%);
}
.db-radio--disabled {
  opacity: 0.5;
}
</style>