wip: Form升级中

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' &&

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 = (
+export const setItemComponentSlots = (formModel: any, slotsProps: Recordable = {}): Recordable => {
-  slots: Slots,
-  slotsProps: Recordable = {},
-  field: string
-): Recordable => {
   const slotObj: Recordable = {}
   for (const key in slotsProps) {
     if (slotsProps[key]) {
-      // 由于组件有可能重复，需要有一个唯一的前缀
+      if (isFunction(slotsProps[key])) {
-      slotObj[key] = (data: Recordable) => {
+        slotObj[key] = () => {
-        return getSlot(slots, `${field}-${key}`, data)
+          return slotsProps[key]?.(formModel)
+        }
+      } else {
+        slotObj[key] = () => {
+          return slotsProps[key]
+        }
       }
     }
   }

src/types/components.d.ts

@@ -39,6 +39,7 @@ export interface InputComponentProps {
   size?: InputProps['size']
   prefixIcon?: string | JSX.Element | (<T>(data: T | any) => string | JSX.Element)
   suffixIcon?: string | JSX.Element | (<T>(data: T | any) => string | JSX.Element)
+  type?: InputProps['type']
   rows?: number
   autosize?: boolean | { Pows?: numer; maxRows?: number }
   autocomplete?: string

src/views/Components/Form/DefaultForm.vue

@@ -378,34 +378,38 @@ const schema = reactive<FormSchema[]>([
     component: 'Input',
     componentProps: {
       slots: {
-        suffix: () => {
+        suffix: (data: any) => {
-          return unref(toggle) ? useIcon({ icon: 'ep:calendar' }) : useIcon({ icon: 'ep:share' })
+          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'