diff --git a/src/components/Form/src/Form.vue b/src/components/Form/src/Form.vue index f914f03..5686668 100644 --- a/src/components/Form/src/Form.vue +++ b/src/components/Form/src/Form.vue @@ -174,7 +174,7 @@ export default defineComponent({ // 单独给只有options属性的组件做判断 const notRenderOptions = ['SelectV2', 'Cascader', 'Transfer'] const slotsMap: Recordable = { - ...setItemComponentSlots(slots, item?.componentProps?.slots, item.field) + ...setItemComponentSlots(unref(formModel), item?.componentProps?.slots) } if ( item?.component !== 'SelectV2' && diff --git a/src/components/Form/src/helper.ts b/src/components/Form/src/helper.ts index 4129e7c..f58b7f1 100644 --- a/src/components/Form/src/helper.ts +++ b/src/components/Form/src/helper.ts @@ -4,6 +4,7 @@ import { getSlot } from '@/utils/tsxHelper' import { PlaceholderMoel } from './types' import { FormSchema } from '@/types/form' import { ColProps } from '@/types/components' +import { isFunction } from '@/utils/is' const { t } = useI18n() @@ -84,21 +85,21 @@ export const setComponentProps = (item: FormSchema): Recordable => { /** * - * @param slots 插槽 + * @param formModel 表单数据 * @param slotsProps 插槽属性 - * @param field 字段名 */ -export const setItemComponentSlots = ( - slots: Slots, - slotsProps: Recordable = {}, - field: string -): Recordable => { +export const setItemComponentSlots = (formModel: any, slotsProps: Recordable = {}): Recordable => { const slotObj: Recordable = {} for (const key in slotsProps) { if (slotsProps[key]) { - // 由于组件有可能重复,需要有一个唯一的前缀 - slotObj[key] = (data: Recordable) => { - return getSlot(slots, `${field}-${key}`, data) + if (isFunction(slotsProps[key])) { + slotObj[key] = () => { + return slotsProps[key]?.(formModel) + } + } else { + slotObj[key] = () => { + return slotsProps[key] + } } } } diff --git a/src/types/components.d.ts b/src/types/components.d.ts index c9d0f02..fbc7c49 100644 --- a/src/types/components.d.ts +++ b/src/types/components.d.ts @@ -39,6 +39,7 @@ export interface InputComponentProps { size?: InputProps['size'] prefixIcon?: string | JSX.Element | ((data: T | any) => string | JSX.Element) suffixIcon?: string | JSX.Element | ((data: T | any) => string | JSX.Element) + type?: InputProps['type'] rows?: number autosize?: boolean | { Pows?: numer; maxRows?: number } autocomplete?: string diff --git a/src/views/Components/Form/DefaultForm.vue b/src/views/Components/Form/DefaultForm.vue index d01d5c5..7415bb3 100644 --- a/src/views/Components/Form/DefaultForm.vue +++ b/src/views/Components/Form/DefaultForm.vue @@ -378,34 +378,38 @@ const schema = reactive([ component: 'Input', componentProps: { slots: { - suffix: () => { - return unref(toggle) ? useIcon({ icon: 'ep:calendar' }) : useIcon({ icon: 'ep:share' }) + suffix: (data: any) => { + return unref(toggle) && data.field4 + ? useIcon({ icon: 'ep:calendar' }) + : useIcon({ icon: 'ep:share' }) }, prefix: useIcon({ icon: 'ep:calendar' }) } } + }, + { + field: 'field5', + label: t('formDemo.mixed'), + component: 'Input', + componentProps: { + slots: { + prepend: useIcon({ icon: 'ep:calendar' }), + append: (data: any) => { + return data.field5 ? useIcon({ icon: 'ep:calendar' }) : useIcon({ icon: 'ep:share' }) + } + } + } + }, + { + field: 'field6', + label: t('formDemo.textarea'), + component: 'Input', + componentProps: { + type: 'textarea', + rows: 2 + } } // { - // field: 'field5', - // label: t('formDemo.mixed'), - // component: 'Input', - // componentProps: { - // slots: { - // prepend: true, - // append: true - // } - // } - // }, - // { - // field: 'field6', - // label: t('formDemo.textarea'), - // component: 'Input', - // componentProps: { - // type: 'textarea', - // rows: 1 - // } - // }, - // { // field: 'field7', // label: t('formDemo.autocomplete'), // component: 'Divider'