feat: Radio改造

src/components/Form/src/Form.vue

@@ -281,8 +281,11 @@ export default defineComponent({
                   }
                 }
 
-                // 单选框组
+                // 单选框组和按钮样式
-                if (item.component === ComponentNameEnum.RADIO_GROUP) {
+                if (
+                  item.component === ComponentNameEnum.RADIO_GROUP ||
+                  item.component === ComponentNameEnum.RADIO_BUTTON
+                ) {
                   slotsMap.default = !componentSlots.default
                     ? () => renderRadioOptions(item)
                     : () => {

src/components/Form/src/componentMap.ts

@@ -26,6 +26,7 @@ import { ComponentName } from '@/types/components'
 const componentMap: Recordable<Component, ComponentName> = {
   Radio: ElRadio,
   RadioGroup: ElRadioGroup,
+  RadioButton: ElRadioGroup,
   Checkbox: ElCheckboxGroup,
   CheckboxButton: ElCheckboxGroup,
   Input: ElInput,
@@ -43,7 +44,6 @@ const componentMap: Recordable<Component, ComponentName> = {
   Divider: ElDivider,
   TimeSelect: ElTimeSelect,
   SelectV2: ElSelectV2,
-  RadioButton: ElRadioGroup,
   InputPassword: InputPassword,
   Editor: Editor
 }

src/types/components.d.ts

@@ -485,6 +485,34 @@ export interface RadioGroupComponentProps {
   style?: CSSProperties
 }
 
+export interface RadioButtonComponentProps {
+  value?: string | number | boolean
+  size?: ElementPlusSize
+  disabled?: boolean
+  textColor?: string
+  fill?: string
+  validateEvent?: boolean
+  label?: string
+  name?: string
+  id?: string
+  options?: RadioOption[]
+  /**
+   * 数据源的字段别名
+   */
+  props: {
+    label?: string
+    value?: string
+    disabled?: string
+  }
+  on?: {
+    change?: (value: string | number | boolean) => void
+  }
+  slots?: {
+    default?: (...args: any[]) => JSX.Element | null
+  }
+  style?: CSSProperties
+}
+
 export interface ColProps {
   span?: number
   xs?: number

src/types/form.d.ts

@@ -14,7 +14,8 @@ import {
   ColorPickerComponentProps,
   TransferComponentProps,
   RadioComponentProps,
-  RadioGroupComponentProps
+  RadioGroupComponentProps,
+  RadioButtonComponentProps
 } from '@/types/components'
 import { FormValueType, FormValueType } from '@/types/form'
 import type { AxiosPromise } from 'axios'
@@ -74,6 +75,7 @@ export interface FormSchema {
     | TransferComponentProps
     | RadioComponentProps
     | RadioGroupComponentProps
+    | RadioButtonComponentProps
 
   /**
    * formItem组件属性，具体可以查看element-plus文档

src/views/Components/Form/DefaultForm.vue

@@ -13,7 +13,7 @@ import {
   RadioOption
 } from '@/types/components'
 import { useForm } from '@/hooks/web/useForm'
-import { ElOption, ElOptionGroup, ElButton, ElRadio } from 'element-plus'
+import { ElOption, ElOptionGroup, ElButton, ElRadio, ElRadioButton } from 'element-plus'
 
 const appStore = useAppStore()
 
@@ -1029,31 +1029,58 @@ const schema = reactive<FormSchema[]>([
         }
       }
     }
+  },
+  {
+    field: 'field40',
+    label: t('formDemo.button'),
+    component: 'RadioButton',
+    componentProps: {
+      options: [
+        {
+          label: 'option-1',
+          value: '1'
+        },
+        {
+          label: 'option-2',
+          value: '2'
+        }
+      ]
+    }
+  },
+  {
+    field: 'field40',
+    label: `${t('formDemo.button')}${t('formDemo.slot')}`,
+    component: 'RadioButton',
+    componentProps: {
+      options: [
+        {
+          label: 'option-1',
+          value: '1'
+        },
+        {
+          label: 'option-2',
+          value: '2'
+        }
+      ],
+      slots: {
+        default: (options: RadioOption[]) => {
+          return options?.map((v) => {
+            return (
+              <ElRadioButton label={v.value}>
+                {v.label}({v.value})
+              </ElRadioButton>
+            )
+          })
+        }
+      }
+    }
+  },
+  {
+    field: 'field41',
+    label: t('formDemo.checkbox'),
+    component: 'Divider'
   }
   // {
-  //   field: 'field40',
-  //   label: t('formDemo.button'),
-  //   component: 'RadioButton',
-  //   componentProps: {
-  //     options: [
-  //       {
-  //         disabled: true,
-  //         label: 'option-1',
-  //         value: '1'
-  //       },
-  //       {
-  //         label: 'option-2',
-  //         value: '2'
-  //       }
-  //     ]
-  //   }
-  // },
-  // {
-  //   field: 'field41',
-  //   label: t('formDemo.checkbox'),
-  //   component: 'Divider'
-  // },
-  // {
   //   field: 'field42',
   //   label: t('formDemo.default'),
   //   component: 'Checkbox',