fix(vue): fix x-content is not work with array type (#1754)

* fix(vue): fix x-content is not work with array type (#1719) * feat(element): add upload x-content demo with arry type
alibaba · Jul 8, 2021 · 66fd1bc · 66fd1bc
1 parent 43d1ef0
commit 66fd1bc
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 52 deletions.
diff --git a/packages/element/docs/.vuepress/components/dumi-previewer.vue b/packages/element/docs/.vuepress/components/dumi-previewer.vue
@@ -61,7 +61,7 @@
         </div>
       </div>
 
-      <div v-show="!collapsed" class="dumi-previewer-source">
+      <div v-show="!innerCollapsed" class="dumi-previewer-source">
         <div v-html="highlightCode" class="language-vue extra-class" />
       </div>
     </section>

diff --git a/packages/element/docs/demos/guide/upload.vue b/packages/element/docs/demos/guide/upload.vue
@@ -20,6 +20,13 @@ import {
 } from '@formily/element'
 import { Button } from 'element-ui'
 
+const UploadButton = {
+  functional: true,
+  render(h) {
+    return h(Button, {}, '上传图片')
+  },
+}
+
 const schema = {
   type: 'object',
   properties: {
@@ -57,6 +64,17 @@ const schema = {
       },
       required: true,
     },
+    custom: {
+      type: 'array',
+      title: '自定义按钮',
+      'x-decorator': 'FormItem',
+      'x-component': 'Upload',
+      'x-component-props': {
+        action: 'https://formily-vue.free.beeceptor.com/file',
+      },
+      'x-content': UploadButton,
+      required: true,
+    },
   },
 }
 

diff --git a/packages/vue/src/components/RecursionField.ts b/packages/vue/src/components/RecursionField.ts
@@ -87,6 +87,43 @@ const RecursionField = observer(
       return () => {
         const basePath = getBasePath()
         const fieldProps = fieldPropsRef.value
+        const xContent = fieldSchemaRef.value['x-content']
+        const xContentMap: Record<string, any[]> = {}
+
+        if (typeof xContent === 'string') {
+          xContentMap['default'] = [xContent]
+        } else if (isVueOptions(xContent) || typeof xContent === 'function') {
+          // is vue component or functional component
+          xContentMap['default'] = [h(xContent, {}, {})]
+        } else if (xContent && typeof xContent === 'object') {
+          // for named slots
+          Object.keys(xContent).forEach((key) => {
+            const child = xContent[key]
+            if (typeof child === 'string') {
+              xContentMap[key] = [child]
+            } else if (isVueOptions(child) || typeof child === 'function') {
+              xContentMap[key] = [h(child, {}, {})]
+            }
+          })
+        }
+
+        const getSlots = (children = []) => {
+          const slots: Record<string, () => any> = {}
+
+          if (children.length > 0) {
+            slots.default = () => [...children]
+          }
+
+          Object.keys(xContentMap).forEach((key) => {
+            if (key === 'default') {
+              slots[key] = () => [...children, ...xContentMap[key]]
+            } else {
+              slots[key] = () => [...xContentMap[key]]
+            }
+          })
+
+          return slots
+        }
 
         const renderProperties = (field?: Formily.Core.Types.GeneralField) => {
           if (props.onlyRenderSelf) return
@@ -120,35 +157,7 @@ const RecursionField = observer(
             }
           )
 
-          const slots: Record<string, () => any> = {}
-
-          if (children.length > 0) {
-            slots.default = () => [...children]
-          }
-
-          const xContent = fieldSchemaRef.value['x-content']
-
-          if (typeof xContent === 'string') {
-            slots['default'] = () => [...children, xContent]
-          } else if (isVueOptions(xContent) || typeof xContent === 'function') {
-            slots['default'] = () => [...children, h(xContent, {}, {})]
-          } else if (xContent && typeof xContent === 'object') {
-            Object.keys(xContent).forEach((key) => {
-              const child = xContent[key]
-              if (key === 'default') {
-                if (typeof child === 'string') {
-                  slots[key] = () => [...children, child]
-                } else if (isVueOptions(child) || typeof child === 'function') {
-                  slots[key] = () => [...children, h(child, {}, {})]
-                }
-              }
-              if (typeof child === 'string') {
-                slots[key] = () => [child]
-              } else if (isVueOptions(child) || typeof child === 'function') {
-                slots[key] = () => [h(child, {}, {})]
-              }
-            })
-          }
+          const slots = getSlots(children)
 
           return h(Fragment, {}, slots)
         }
@@ -171,6 +180,7 @@ const RecursionField = observer(
               }
             )
           } else if (fieldSchemaRef.value.type === 'array') {
+            const slots = getSlots()
             return h(
               ArrayField,
               {
@@ -180,7 +190,7 @@ const RecursionField = observer(
                   basePath: basePath,
                 },
               },
-              {}
+              slots
             )
           } else if (fieldSchemaRef.value.type === 'void') {
             if (props.onlyRenderProperties) return renderProperties()
@@ -199,27 +209,7 @@ const RecursionField = observer(
             )
           }
 
-          const slots: Record<string, () => any> = {}
-
-          const xContent = fieldSchemaRef.value['x-content']
-
-          if (typeof xContent === 'string') {
-            slots['default'] = () => [xContent]
-          } else if (isVueOptions(xContent) || typeof xContent === 'function') {
-            // is vue component or functional component
-            slots['default'] = () => [h(xContent, {}, {})]
-          } else if (xContent && typeof xContent === 'object') {
-            // for named slots
-            Object.keys(xContent).forEach((key) => {
-              const child = xContent[key]
-              if (typeof child === 'string') {
-                slots[key] = () => [child]
-              } else if (isVueOptions(child) || typeof child === 'function') {
-                slots[key] = () => [h(child, {}, {})]
-              }
-            })
-          }
-
+          const slots = getSlots()
           return h(
             Field,
             {