feat(lib): uploadWidget 组件支持slots 配置function 接受createElement参数

lljj-x · Dec 23, 2020 · 2ceebcb · 2ceebcb
1 parent 8d0b09a
commit 2ceebcb
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 17 deletions.
diff --git a/packages/docs/docs/zh/guide/components.md b/packages/docs/docs/zh/guide/components.md
@@ -89,19 +89,24 @@ export default {
                         'ui:action': 'https://run.mocky.io/v3/518d7af7-204f-45ab-9628-a6e121dab8ca',
                         'ui:widget': 'UploadWidget',
                         'ui:slots': {
-                            default: this.$createElement('el-button', {
-                                slot: 'default',
-                                props: {
-                                    type: 'primary'
-                               },
-                            }, ['替换了上传按钮']),
-                            tip: this.$createElement('div', {
-                                slot: 'tip',
-                                style: {
-                                    fontSize: '12px',
-                                    color: '#666'
-                                }
-                            }, ['只能上传jpg/png文件，且不超过500kb，且不超过500kb且不超过500kb且不超过500kb']),
+                            default(h) {
+                                return h('el-button', {
+                                    slot: 'default',
+                                    props: {
+                                        size: 'mini',
+                                        type: 'primary'
+                                    },
+                                }, ['上传图片'])
+                            },
+                            tip(h) {
+                                return h('div', {
+                                    slot: 'tip',
+                                    style: {
+                                        fontSize: '12px',
+                                        color: '#666'
+                                    }
+                                }, ['注：请上传100 * 100尺寸的图片'])
+                            },
                        }
                     },
                     imgUrlList: {

diff --git a/packages/lib/src/JsonSchemaForm/widgets/UploadWidget/index.js b/packages/lib/src/JsonSchemaForm/widgets/UploadWidget/index.js
@@ -71,7 +71,6 @@ export default {
                 value = geUrl(fileItem);
             }
 
-            debugger;
             this.$emit('input', value);
         }
     },
@@ -83,6 +82,8 @@ export default {
             slots,
         } = this.$props;
 
+        console.log(slots);
+
         const data = {
             attrs: {
                 fileList: this.fileList,
@@ -119,10 +120,11 @@ export default {
 
         const childVNode = [];
 
+        console.log(slots);
         if (slots && slots.default) {
             childVNode.push(h('template', {
                 slot: 'default',
-            }, [slots.default]));
+            }, [typeof slots.default === 'function' ? slots.default(h) : slots.default]));
         } else {
             childVNode.push(h('el-button', {
                 props: {
@@ -134,7 +136,7 @@ export default {
         if (slots && slots.tip) {
             childVNode.push(h('template', {
                 slot: 'tip',
-            }, [slots.tip]));
+            }, [typeof slots.tip === 'function' ? slots.tip(h) : slots.tip]));
         }
 
         return h('el-upload', data, childVNode);

diff --git a/yarn.lock b/yarn.lock
@@ -5870,7 +5870,7 @@ escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
 
-eslint-import-resolver-node@^0.3.3:
+eslint-import-resolver-node@^0.3.3, eslint-import-resolver-node@^0.3.4:
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.4.tgz#85ffa81942c25012d8231096ddf679c03042c717"
   integrity sha512-ogtf+5AB/O+nM6DIeBUNr2fuT7ot9Qg/1harBfBtaP13ekEWFQEEMP94BCB7zaNW3gyY+8SHYF00rnqYwXKWOA==
@@ -5916,6 +5916,25 @@ eslint-plugin-import@^2.14.0:
     resolve "^1.17.0"
     tsconfig-paths "^3.9.0"
 
+eslint-plugin-import@^2.20.2:
+  version "2.22.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.22.1.tgz#0896c7e6a0cf44109a2d97b95903c2bb689d7702"
+  integrity sha512-8K7JjINHOpH64ozkAhpT3sd+FswIZTfMZTjdx052pnWrgRCVfp8op9tbjpAk3DdUeI/Ba4C8OjdC0r90erHEOw==
+  dependencies:
+    array-includes "^3.1.1"
+    array.prototype.flat "^1.2.3"
+    contains-path "^0.1.0"
+    debug "^2.6.9"
+    doctrine "1.5.0"
+    eslint-import-resolver-node "^0.3.4"
+    eslint-module-utils "^2.6.0"
+    has "^1.0.3"
+    minimatch "^3.0.4"
+    object.values "^1.1.1"
+    read-pkg-up "^2.0.0"
+    resolve "^1.17.0"
+    tsconfig-paths "^3.9.0"
+
 eslint-plugin-vue@^5.0.0:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/eslint-plugin-vue/-/eslint-plugin-vue-5.2.3.tgz#3ee7597d823b5478804b2feba9863b1b74273961"