diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue index 547f699..9e47bfb 100644 --- a/src/components/Form/src/Form.vue +++ b/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) : () => { diff --git a/src/components/Form/src/componentMap.ts b/src/components/Form/src/componentMap.ts index afd3d12..e8e3731 100644 --- a/src/components/Form/src/componentMap.ts +++ b/src/components/Form/src/componentMap.ts @@ -26,6 +26,7 @@ import { ComponentName } from '@/types/components' const componentMap: Recordable = { Radio: ElRadio, RadioGroup: ElRadioGroup, + RadioButton: ElRadioGroup, Checkbox: ElCheckboxGroup, CheckboxButton: ElCheckboxGroup, Input: ElInput, @@ -43,7 +44,6 @@ const componentMap: Recordable = { Divider: ElDivider, TimeSelect: ElTimeSelect, SelectV2: ElSelectV2, - RadioButton: ElRadioGroup, InputPassword: InputPassword, Editor: Editor } diff --git a/src/types/components.d.ts b/src/types/components.d.ts index 28a05a9..9cb0727 100644 --- a/src/types/components.d.ts +++ b/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 diff --git a/src/types/form.d.ts b/src/types/form.d.ts index 6cec366..e8a564d 100644 --- a/src/types/form.d.ts +++ b/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文档 diff --git a/src/views/Components/Form/DefaultForm.vue b/src/views/Components/Form/DefaultForm.vue index aef5790..109c56e 100644 --- a/src/views/Components/Form/DefaultForm.vue +++ b/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([ } } } + }, + { + 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 ( + + {v.label}({v.value}) + + ) + }) + } + } + } + }, + { + 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',