wip(VForm): VForm component development

src/App.vue

@@ -15,15 +15,17 @@ onMounted(() => {
 const schema = reactive<VFormSchema[]>([
   {
     field: 'field1',
+    component: 'Divider',
+    componentProps: {
+      text: 'input示例'
+    }
+  },
+  {
+    field: 'field2',
     label: '字段1',
     component: 'Input'
   }
 ])
-// setTimeout(() => {
-//   schema.push({
-//     field: '2'
-//   })
-// }, 3000)
 </script>
 
 <template>

src/components/Form/src/VForm.vue

@@ -4,7 +4,7 @@ import { ElForm, ElFormItem, ElRow, ElCol } from 'element-plus'
 import { COMPONENT_MAP } from './componentMap'
 import { propTypes } from '@/utils/propTypes'
 import { getSlot } from '@/utils/tsxHelper'
-import { setTextPlaceholder } from './helper'
+import { setTextPlaceholder, setGridProp } from './helper'
 
 export default defineComponent({
   name: 'VForm',
@@ -43,39 +43,53 @@ export default defineComponent({
     // 渲染包裹标签，是否使用栅格布局
     function renderWrap() {
       const content = isCol ? (
-        <ElRow gutter={20}>
-          <ElCol>{renderFormItem()}</ElCol>
-        </ElRow>
+        <ElRow gutter={20}>{renderFormItemWrap()}</ElRow>
       ) : (
-        renderFormItem()
+        renderFormItemWrap()
       )
-      console.log(content)
       return content
     }
 
-    // 渲染formItem
-    function renderFormItem() {
-      // hidden属性表示隐藏
+    // 是否要渲染el-col
+    function renderFormItemWrap() {
+      // hidden属性表示隐藏，不做渲染
       return schema
         .filter((v) => !v.hidden)
         .map((item) => {
-          return (
-            <ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label}>
-              {() => {
-                const Com = COMPONENT_MAP[item.component as string] as ReturnType<
-                  typeof defineComponent
-                >
-                return (
-                  <Com v-model={test.value} {...(autoSetPlaceholder && setTextPlaceholder(item))}>
-                    {item.options ? renderOptions() : null}
-                  </Com>
-                )
-              }}
-            </ElFormItem>
+          // 如果是 Divider 组件，需要自己占用一行
+          const isDivider = item.component === 'Divider'
+          const Com = COMPONENT_MAP['Divider'] as ReturnType<typeof defineComponent>
+          return isDivider ? (
+            <Com {...{ contentPosition: 'left', ...item.componentProps }}>
+              {item?.componentProps?.text}
+            </Com>
+          ) : isCol ? (
+            // 如果需要栅格，需要包裹 ElCol
+            <ElCol {...setGridProp(item.colProps)}>{renderFormItem(item)}</ElCol>
+          ) : (
+            renderFormItem(item)
           )
         })
     }
 
+    // 渲染formItem
+    function renderFormItem(item: VFormSchema) {
+      return (
+        <ElFormItem {...(item.formItemProps || {})} prop={item.field} label={item.label}>
+          {() => {
+            const Com = COMPONENT_MAP[item.component as string] as ReturnType<
+              typeof defineComponent
+            >
+            return (
+              <Com vModel={test.value} {...(autoSetPlaceholder && setTextPlaceholder(item))}>
+                {item.options ? renderOptions() : null}
+              </Com>
+            )
+          }}
+        </ElFormItem>
+      )
+    }
+
     // 渲染options
     function renderOptions() {
       // const optionsMap = ['Radio', 'Checkbox', 'Select']

src/components/Form/src/helper.ts

@@ -11,6 +11,7 @@ interface PlaceholderMoel {
 /**
  *
  * @param schema 对应组件数据
+ * @returns 返回提示信息对象
  * @description 用于自动设置placeholder
  */
 export function setTextPlaceholder(schema: VFormSchema): PlaceholderMoel {
@@ -42,3 +43,23 @@ export function setTextPlaceholder(schema: VFormSchema): PlaceholderMoel {
   }
   return {}
 }
+
+/**
+ *
+ * @param col 内置栅格
+ * @returns 返回栅格属性
+ * @description 合并传入进来的栅格属性
+ */
+export function setGridProp(col: ColProps = {}): ColProps {
+  const colProps: ColProps = {
+    ...{
+      xs: 24,
+      sm: 12,
+      md: 12,
+      lg: 12,
+      xl: 8
+    },
+    ...col
+  }
+  return colProps
+}