u

code/base-project/base-vue/packages/ao-design/src/radio/context.ts

@@ -2,11 +2,12 @@ import type { InjectionKey, Slots } from 'vue'
 
 export interface RadioGroupContext {
   name: 'AoRadioGroup'
-  value: string | number | boolean
+  value: string | number | boolean | undefined
   disabled: boolean
   slots: Slots
+  allowUncheck: boolean
   type?: 'default' | 'filled' | 'primaryFilled' | 'card' | 'pureCard' | 'outline'
-  handleChange: (value: string | number | boolean, e: Event) => void
+  handleChange: (value: string | number | boolean | undefined, e: Event) => void
 }
 
 export const radioGroupKey: InjectionKey<RadioGroupContext>

code/base-project/base-vue/packages/ao-design/src/radio/demo.vue

@@ -54,6 +54,7 @@ function toggleThemeDark() {
         extra-field="note"
         type="filled"
         size="small"
+        :allow-uncheck="false"
         @change="handleChange"
       />
     </div>

code/base-project/base-vue/packages/ao-design/src/radio/radio-group.tsx

@@ -22,7 +22,7 @@ export default defineComponent({
     },
     defaultValue: {
       type: [String, Number, Boolean] as PropType<string | number | boolean>,
-      default: '',
+      default: undefined,
     },
     disabled: {
       type: Boolean,
@@ -56,21 +56,23 @@ export default defineComponent({
       type: String as PropType<'small' | 'medium' | 'large'>,
       default: 'medium',
     },
+    allowUncheck: {
+      type: Boolean,
+      default: true,
+    },
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit, slots }) {
     const prefixCls = getPrefixCls('radio-group')
 
     // 内部值，优先使用 v-model
-    const _value = ref(props.modelValue ?? props.defaultValue)
+    const _value = ref(props.modelValue ?? props.defaultValue ?? undefined)
 
     watch(() => props.modelValue, (newVal) => {
-      if (newVal !== undefined) {
-        _value.value = newVal
-      }
+      _value.value = newVal ?? undefined
     })
 
-    const handleChange = (val: string | number | boolean, e: Event) => {
+    const handleChange = (val: string | number | boolean | undefined, e: Event) => {
       _value.value = val
       emit('update:modelValue', val)
       emit('change', val, e)
@@ -84,6 +86,7 @@ export default defineComponent({
       disabled: groupDisabled,
       type: groupType,
       slots,
+      allowUncheck: props.allowUncheck,
       handleChange,
     }))
 
@@ -126,6 +129,7 @@ export default defineComponent({
             modelValue={_value.value === opt[props.valueField]}
             extra={extraContent}
             type={props.type}
+            allowUncheck={props.allowUncheck}
           >
             {labelContent}
           </Radio>

code/base-project/base-vue/packages/ao-design/src/radio/radio.tsx

@@ -52,18 +52,20 @@ export default defineComponent({
       return props.modelValue ?? _checked.value
     })
 
+    const isAllowUncheck = computed(() => props.allowUncheck || radioGroupCtx?.allowUncheck)
+
     const handleClick = (e: Event) => {
       if (isDisabled.value)
         return
-      if (isChecked.value && !props.allowUncheck)
+      if (isChecked.value && !isAllowUncheck.value)
         return
 
       if (inGroup.value) {
-        const newValue = isChecked.value && props.allowUncheck ? '' : props.value
+        const newValue = isChecked.value && isAllowUncheck.value ? undefined : props.value
         radioGroupCtx?.handleChange(newValue, e)
       }
       else {
-        const newValue = props.allowUncheck ? !isChecked.value : true
+        const newValue = isAllowUncheck.value ? !isChecked.value : true
         _checked.value = newValue
         emit('update:modelValue', newValue)
         emit('change', props.value, e)