@form-create/element-ui 3.0.1 → 3.1.0

package/dist/form-create.js

@@ -1,5 +1,5 @@
 /*!
- * @form-create/element-ui v3.0.1
+ * @form-create/element-ui v3.1.0
  * (c) 2018-2022 xaboy
  * Github https://github.com/xaboy/form-create
  * Released under the MIT License.
@@ -15,9 +15,14 @@
 
     if (Object.getOwnPropertySymbols) {
       var symbols = Object.getOwnPropertySymbols(object);
-      enumerableOnly && (symbols = symbols.filter(function (sym) {
-        return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-      })), keys.push.apply(keys, symbols);
+
+      if (enumerableOnly) {
+        symbols = symbols.filter(function (sym) {
+          return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+        });
+      }
+
+      keys.push.apply(keys, symbols);
     }
 
     return keys;
@@ -25,12 +30,19 @@
 
   function _objectSpread2(target) {
     for (var i = 1; i < arguments.length; i++) {
-      var source = null != arguments[i] ? arguments[i] : {};
-      i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-        _defineProperty(target, key, source[key]);
-      }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
-      });
+      var source = arguments[i] != null ? arguments[i] : {};
+
+      if (i % 2) {
+        ownKeys(Object(source), true).forEach(function (key) {
+          _defineProperty(target, key, source[key]);
+        });
+      } else if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+      } else {
+        ownKeys(Object(source)).forEach(function (key) {
+          Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+      }
     }
 
     return target;
@@ -39,11 +51,17 @@
   function _typeof(obj) {
     "@babel/helpers - typeof";
 
-    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
-      return typeof obj;
-    } : function (obj) {
-      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
-    }, _typeof(obj);
+    if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
+      _typeof = function (obj) {
+        return typeof obj;
+      };
+    } else {
+      _typeof = function (obj) {
+        return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      };
+    }
+
+    return _typeof(obj);
   }
 
   function _classCallCheck(instance, Constructor) {
@@ -52,25 +70,6 @@
     }
   }
 
-  function _defineProperties(target, props) {
-    for (var i = 0; i < props.length; i++) {
-      var descriptor = props[i];
-      descriptor.enumerable = descriptor.enumerable || false;
-      descriptor.configurable = true;
-      if ("value" in descriptor) descriptor.writable = true;
-      Object.defineProperty(target, descriptor.key, descriptor);
-    }
-  }
-
-  function _createClass(Constructor, protoProps, staticProps) {
-    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
-    if (staticProps) _defineProperties(Constructor, staticProps);
-    Object.defineProperty(Constructor, "prototype", {
-      writable: false
-    });
-    return Constructor;
-  }
-
   function _defineProperty(obj, key, value) {
     if (key in obj) {
       Object.defineProperty(obj, key, {
@@ -98,9 +97,6 @@
         configurable: true
       }
     });
-    Object.defineProperty(subClass, "prototype", {
-      writable: false
-    });
     if (superClass) _setPrototypeOf(subClass, superClass);
   }
 
@@ -213,11 +209,12 @@
     }, []);
   }
 
-  var NAME$a = 'fcCheckbox';
+  var NAME$9 = 'fcCheckbox';
   var Checkbox = vue.defineComponent({
-    name: NAME$a,
+    name: NAME$9,
     inheritAttrs: false,
     props: {
+      formCreateInject: Object,
       modelValue: {
         type: Array,
         "default": function _default() {
@@ -228,51 +225,21 @@
     },
     emits: ['update:modelValue'],
     setup: function setup(props, _) {
-      var _toRefs = vue.toRefs(vue.inject('formCreateInject')),
-          options = _toRefs.options;
-
-      var trueValue = vue.ref([]);
+      var options = vue.toRef(props.formCreateInject, 'options', []);
       var value = vue.toRef(props, 'modelValue');
 
       var _options = function _options() {
         return Array.isArray(options.value) ? options.value : [];
       };
 
-      var update = function update() {
-        trueValue.value = value.value ? _options().filter(function (opt) {
-          return value.value.indexOf(opt.value) !== -1;
-        }).map(function (option) {
-          return option.label;
-        }) : [];
-      };
-
-      vue.watch(options, function () {
-        update();
-      }, {
-        deep: true,
-        immediate: true
-      });
       return {
         options: _options,
-        trueValue: trueValue,
         value: value,
         onInput: function onInput(n) {
-          _.emit('update:modelValue', _options().filter(function (opt) {
-            return n.indexOf(opt.label) !== -1;
-          }).map(function (opt) {
-            return opt.value;
-          }).filter(function (v) {
-            return v !== undefined;
-          }));
-        },
-        update: update
+          _.emit('update:modelValue', n);
+        }
       };
     },
-    watch: {
-      modelValue: function modelValue() {
-        this.update();
-      }
-    },
     render: function render() {
       var _this$$slots$default,
           _this$$slots,
@@ -281,17 +248,23 @@
       var name = this.type === 'button' ? 'ElCheckboxButton' : 'ElCheckbox';
       var Type = vue.resolveComponent(name);
       return vue.createVNode(vue.resolveComponent("ElCheckboxGroup"), vue.mergeProps(this.$attrs, {
-        "modelValue": this.trueValue,
+        "modelValue": this.value,
         "onUpdate:modelValue": this.onInput
       }), _objectSpread2({
         "default": function _default() {
           return [_this.options().map(function (opt, index) {
             var props = _objectSpread2({}, opt);
 
+            var value = props.value;
             delete props.value;
             return vue.createVNode(Type, vue.mergeProps(props, {
+              "label": value,
               "key": name + index + opt.value
-            }), null);
+            }), {
+              "default": function _default() {
+                return [props.label || props.value || ''];
+              }
+            });
           }), (_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)];
         }
       }, getSlot(this.$slots, ['default'])));
@@ -373,16 +346,16 @@
     }
   }
 
-  var css_248z$2 = "._fc-frame .fc-files img{display:inline-block;height:100%;vertical-align:top;width:100%}._fc-frame .fc-upload-btn{border:1px dashed #c0ccda;cursor:pointer}._fc-frame .fc-upload-cover{background:rgba(0,0,0,.6);bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;-webkit-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s}._fc-frame .fc-upload-cover i{color:#fff;cursor:pointer;font-size:20px;margin:0 2px}._fc-frame .fc-files:hover .fc-upload-cover{opacity:1}._fc-frame .el-upload{display:block}._fc-frame .fc-upload-btn,.fc-files{background:#fff;border:1px solid #c0ccda;border-radius:4px;-webkit-box-shadow:2px 2px 5px rgba(0,0,0,.1);box-shadow:2px 2px 5px rgba(0,0,0,.1);-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;height:58px;line-height:58px;margin-right:4px;overflow:hidden;position:relative;text-align:center;width:58px}";
+  var css_248z$2 = "._fc-frame ._fc-files img{display:inline-block;height:100%;vertical-align:top;width:100%}._fc-frame ._fc-upload-btn{border:1px dashed #c0ccda}._fc-frame ._fc-upload-cover{background:rgba(0,0,0,.6);bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;-webkit-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s}._fc-frame ._fc-upload-cover i{color:#fff;cursor:pointer;font-size:20px;margin:0 2px}._fc-frame ._fc-files:hover ._fc-upload-cover{opacity:1}._fc-frame .el-upload{display:block}._fc-frame ._fc-upload-btn{cursor:pointer}._fc-files,._fc-frame ._fc-upload-btn{background:#fff;border:1px solid #c0ccda;border-radius:4px;-webkit-box-shadow:2px 2px 5px rgba(0,0,0,.1);box-shadow:2px 2px 5px rgba(0,0,0,.1);-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;height:58px;line-height:58px;margin-right:4px;overflow:hidden;position:relative;text-align:center;width:58px}";
   styleInject(css_248z$2);
 
   function _isSlot$1(s) {
     return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
   }
 
-  var NAME$9 = 'fcFrame';
+  var NAME$8 = 'fcFrame';
   var Frame = vue.defineComponent({
-    name: NAME$9,
+    name: NAME$8,
     props: {
       type: {
         type: String,
@@ -403,7 +376,7 @@
       },
       icon: {
         type: String,
-        "default": 'el-icon-upload2'
+        "default": 'upload'
       },
       width: {
         type: String,
@@ -426,7 +399,10 @@
         "default": '关闭'
       },
       modalTitle: String,
-      handleIcon: [String, Boolean],
+      handleIcon: {
+        type: [String, Boolean],
+        "default": undefined
+      },
       title: String,
       allowRemove: {
         type: Boolean,
@@ -481,9 +457,9 @@
       okBtn: {
         type: Boolean,
         "default": true
-      }
+      },
+      formCreateInject: Object
     },
-    inject: ['formCreateInject'],
     emits: ['update:modelValue', 'change'],
     data: function data() {
       return {
@@ -500,9 +476,6 @@
       }
     },
     methods: {
-      key: function key(unique) {
-        return unique;
-      },
       close: function close() {
         this.closeModel(true);
       },
@@ -542,7 +515,7 @@
           }).toString(),
           readonly: true
         }, {
-          "key": this.key('input')
+          "key": 1
         }), {
           append: function append() {
             return vue.createVNode(vue.resolveComponent("ElButton"), {
@@ -553,14 +526,18 @@
             }, null);
           },
           suffix: function suffix() {
-            return _this.fileList.length ? vue.createVNode("i", {
-              "class": "el-input__icon el-icon-circle-close",
+            return _this.fileList.length ? vue.createVNode(vue.resolveComponent("ElIcon"), {
+              "class": "el-input__icon",
               "onClick": function onClick() {
                 _this.fileList = [];
 
                 _this.input();
               }
-            }, null) : null;
+            }, {
+              "default": function _default() {
+                return [vue.createVNode(vue.resolveComponent("CircleClose"), null, null)];
+              }
+            }) : null;
           }
         });
       },
@@ -570,13 +547,13 @@
         }
 
         return vue.createVNode("div", {
-          "key": this.key('group')
+          "key": 2
         }, [children]);
       },
       makeItem: function makeItem(index, children) {
         return vue.createVNode("div", {
-          "class": "fc-files",
-          "key": this.key('file' + index)
+          "class": "_fc-files",
+          "key": '3' + index
         }, [children]);
       },
       valid: function valid(f) {
@@ -599,43 +576,53 @@
           }
 
           return vue.createVNode("div", {
-            "class": "fc-upload-cover",
-            "key": this.key('uc')
+            "class": "_fc-upload-cover",
+            "key": 4
           }, [icons]);
         }
       },
       makeHandleIcon: function makeHandleIcon(val, index) {
         var _this2 = this;
 
-        return vue.createVNode("i", {
-          "class": this.handleIcon === true || this.handleIcon === undefined ? 'el-icon-view' : this.handleIcon,
+        var Type = vue.resolveComponent(this.handleIcon === true || this.handleIcon === undefined ? 'view' : this.handleIcon);
+        return vue.createVNode(vue.resolveComponent("ElIcon"), {
           "onClick": function onClick() {
             return _this2.handleClick(val);
           },
-          "key": this.key('hi' + index)
-        }, null);
+          "key": '5' + index
+        }, {
+          "default": function _default() {
+            return [vue.createVNode(Type, null, null)];
+          }
+        });
       },
       makeRemoveIcon: function makeRemoveIcon(val, index) {
         var _this3 = this;
 
-        return vue.createVNode("i", {
-          "class": "el-icon-delete",
+        return vue.createVNode(vue.resolveComponent("ElIcon"), {
           "onClick": function onClick() {
             return _this3.handleRemove(val);
           },
-          "key": this.key('ri' + index)
-        }, null);
+          "key": '6' + index
+        }, {
+          "default": function _default() {
+            return [vue.createVNode(vue.resolveComponent("delete"), null, null)];
+          }
+        });
       },
       makeFiles: function makeFiles() {
         var _this4 = this;
 
         return this.makeGroup(this.fileList.map(function (src, index) {
-          return _this4.makeItem(index, [vue.createVNode("i", {
-            "class": "el-icon-tickets",
+          return _this4.makeItem(index, [vue.createVNode(vue.resolveComponent("ElIcon"), {
             "onClick": function onClick() {
               return _this4.handleClick(src);
             }
-          }, null), _this4.makeIcons(src, index)]);
+          }, {
+            "default": function _default() {
+              return [vue.createVNode(vue.resolveComponent("document"), null, null)];
+            }
+          }), _this4.makeIcons(src, index)]);
         }));
       },
       makeImages: function makeImages() {
@@ -650,15 +637,18 @@
       makeBtn: function makeBtn() {
         var _this6 = this;
 
+        var Type = vue.resolveComponent(this.icon);
         return vue.createVNode("div", {
-          "class": "fc-upload-btn",
+          "class": "_fc-upload-btn",
           "onClick": function onClick() {
             return _this6.showModel();
           },
-          "key": this.key('btn')
-        }, [vue.createVNode("i", {
-          "class": this.icon
-        }, null)]);
+          "key": 7
+        }, [vue.createVNode(vue.resolveComponent("ElIcon"), null, {
+          "default": function _default() {
+            return [vue.createVNode(Type, null, null)];
+          }
+        })]);
       },
       handleClick: function handleClick(src) {
         if (this.onHandle) {
@@ -809,7 +799,7 @@
             "src": src,
             "frameBorder": "0",
             "style": {
-              'height': height,
+              height: height,
               'border': '0 none',
               'width': '100%'
             }
@@ -838,11 +828,12 @@
     }
   });
 
-  var NAME$8 = 'fcRadio';
+  var NAME$7 = 'fcRadio';
   var Radio = vue.defineComponent({
-    name: NAME$8,
+    name: NAME$7,
     inheritAttrs: false,
     props: {
+      formCreateInject: Object,
       modelValue: {
         type: [String, Number, Boolean],
         "default": ''
@@ -851,49 +842,21 @@
     },
     emits: ['update:modelValue'],
     setup: function setup(props, _) {
-      var _toRefs = vue.toRefs(vue.inject('formCreateInject')),
-          options = _toRefs.options;
-
-      var trueValue = vue.ref([]);
+      var options = vue.toRef(props.formCreateInject, 'options', []);
       var value = vue.toRef(props, 'modelValue');
 
       var _options = function _options() {
         return Array.isArray(options.value) ? options.value : [];
       };
 
-      var update = function update() {
-        trueValue.value = _options().filter(function (opt) {
-          return opt.value === value.value;
-        }).reduce(function (initial, opt) {
-          return opt.label;
-        }, '');
-      };
-
-      vue.watch(options, function () {
-        update();
-      }, {
-        deep: true,
-        immediate: true
-      });
       return {
         options: _options,
-        trueValue: trueValue,
         value: value,
         onInput: function onInput(n) {
-          _.emit('update:modelValue', _options().filter(function (opt) {
-            return opt.label === n;
-          }).reduce(function (initial, opt) {
-            return opt.value;
-          }, ''));
-        },
-        update: update
+          _.emit('update:modelValue', n);
+        }
       };
     },
-    watch: {
-      modelValue: function modelValue() {
-        this.update();
-      }
-    },
     render: function render() {
       var _this$$slots$default,
           _this$$slots,
@@ -902,28 +865,35 @@
       var name = this.type === 'button' ? 'ElRadioButton' : 'ElRadio';
       var Type = vue.resolveComponent(name);
       return vue.createVNode(vue.resolveComponent("ElRadioGroup"), vue.mergeProps(this.$attrs, {
-        "modelValue": this.trueValue,
+        "modelValue": this.value,
         "onUpdate:modelValue": this.onInput
       }), _objectSpread2({
         "default": function _default() {
           return [_this.options().map(function (opt, index) {
             var props = _objectSpread2({}, opt);
 
+            var value = props.value;
             delete props.value;
             return vue.createVNode(Type, vue.mergeProps(props, {
+              "label": value,
               "key": name + index + opt.value
-            }), null);
+            }), {
+              "default": function _default() {
+                return [props.label || props.value || ''];
+              }
+            });
           }), (_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)];
         }
       }, getSlot(this.$slots, ['default'])));
     }
   });
 
-  var NAME$7 = 'fcSelect';
+  var NAME$6 = 'fcSelect';
   var Select = vue.defineComponent({
-    name: NAME$7,
+    name: NAME$6,
     inheritAttrs: false,
     props: {
+      formCreateInject: Object,
       modelValue: {
         type: [Array, String, Number, Boolean, Object],
         "default": undefined
@@ -932,9 +902,7 @@
     },
     emits: ['update:modelValue'],
     setup: function setup(props) {
-      var _toRefs = vue.toRefs(vue.inject('formCreateInject')),
-          options = _toRefs.options;
-
+      var options = vue.toRef(props.formCreateInject, 'options', []);
       var value = vue.toRef(props, 'modelValue');
 
       var _options = function _options() {
@@ -968,9 +936,9 @@
     }
   });
 
-  var NAME$6 = 'fcTree';
+  var NAME$5 = 'fcTree';
   var Tree = vue.defineComponent({
-    name: NAME$6,
+    name: NAME$5,
     inheritAttrs: false,
     formCreateParser: {
       mergeProp: function mergeProp(ctx) {
@@ -1032,7 +1000,7 @@
     }
   });
 
-  var css_248z$1 = "._fc-upload .fc-files img{display:inline-block;height:100%;vertical-align:top;width:100%}._fc-upload .fc-upload-btn{border:1px dashed #c0ccda;cursor:pointer}._fc-upload .fc-upload-cover{background:rgba(0,0,0,.6);bottom:0;left:0;opacity:0;position:absolute;right:0;top:0;-webkit-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s}._fc-upload .fc-upload-cover i{color:#fff;cursor:pointer;font-size:20px;margin:0 2px}._fc-upload .fc-files:hover .fc-upload-cover{opacity:1}._fc-upload .el-upload{display:block}._fc-upload .fc-files,._fc-upload .fc-upload-btn{background:#fff;border:1px solid #c0ccda;border-radius:4px;-webkit-box-shadow:2px 2px 5px rgba(0,0,0,.1);box-shadow:2px 2px 5px rgba(0,0,0,.1);-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;height:58px;line-height:58px;margin-right:4px;overflow:hidden;position:relative;text-align:center;width:58px}";
+  var css_248z$1 = "._fc-exceed .el-upload{display:none}";
   styleInject(css_248z$1);
 
   function parseFile(file, i) {
@@ -1047,37 +1015,21 @@
     return ('' + file).split('/').pop();
   }
 
-  var NAME$5 = 'fcUpload';
+  var NAME$4 = 'fcUpload';
   var Upload = vue.defineComponent({
-    name: NAME$5,
+    name: NAME$4,
     inheritAttrs: false,
     props: {
-      onHandle: Function,
-      uploadType: {
-        type: String,
-        "default": 'file'
-      },
-      limit: {
-        type: Number,
-        "default": 0
-      },
-      allowRemove: {
-        type: Boolean,
-        "default": true
-      },
       previewMask: undefined,
       modalTitle: String,
-      handleIcon: [String, Boolean],
       modelValue: [Array, String]
     },
-    emits: ['update:modelValue'],
+    emits: ['update:modelValue', 'change', 'remove'],
     data: function data() {
       return {
-        uploadList: [],
         previewVisible: false,
         previewImage: '',
-        fileList: [],
-        cacheFiles: []
+        fileList: []
       };
     },
     created: function created() {
@@ -1085,13 +1037,6 @@
     },
     watch: {
       modelValue: function modelValue(n) {
-        if (this.$refs.upload.uploadFiles.every(function (file) {
-          return !file.status || file.status === 'success';
-        })) {
-          this.$refs.upload.uploadFiles = toArray(n).map(parseFile);
-          this.uploadList = this.$refs.upload.uploadFiles;
-        }
-
         this.fileList = toArray(n).map(parseFile);
       },
       limit: function limit(n, o) {
@@ -1101,141 +1046,62 @@
       }
     },
     methods: {
-      key: function key(unique) {
-        return unique;
-      },
-      isDisabled: function isDisabled() {
-        return this.$attrs.disabled === true;
-      },
-      onRemove: function onRemove(file) {
-        if (this.isDisabled()) {
-          return;
-        }
-
-        this.$refs.upload.handleRemove(file);
-      },
-      handleClick: function handleClick(file) {
-        if (this.onHandle) {
-          return this.onHandle(file);
+      handlePreview: function handlePreview(file) {
+        if (this.onPreview) {
+          this.onPreview.apply(this, arguments);
         } else {
           this.previewImage = file.url;
           this.previewVisible = true;
         }
       },
-      makeItem: function makeItem(file, index) {
-        return this.uploadType === 'image' ? vue.createVNode("img", {
-          "src": file.url,
-          "key": this.key('img' + index)
-        }, null) : vue.createVNode("i", {
-          "class": "el-icon-document",
-          "key": this.key('i' + index)
-        }, null);
-      },
-      makeRemoveIcon: function makeRemoveIcon(file, index) {
-        var _this = this;
-
-        return vue.createVNode("i", {
-          "class": "el-icon-delete",
-          "onClick": function onClick() {
-            return _this.onRemove(file);
-          },
-          "key": this.key('ri' + index)
-        }, null);
-      },
-      makeHandleIcon: function makeHandleIcon(file, index) {
-        var _this2 = this;
-
-        return vue.createVNode("i", {
-          "class": this.handleIcon === true || this.handleIcon === undefined ? 'el-icon-view' : this.handleIcon,
-          "onClick": function onClick() {
-            return _this2.handleClick(file);
-          },
-          "key": this.key('hi' + index)
-        }, null);
-      },
-      makeProgress: function makeProgress(file, index) {
-        return vue.createVNode(vue.resolveComponent("ElProgress"), vue.mergeProps({
-          percentage: file.percentage,
-          type: 'circle',
-          width: 52
-        }, {
-          "style": "margin-top:2px;",
-          "key": this.key('pg' + index)
-        }), null);
-      },
-      makeIcons: function makeIcons(file, index) {
-        var icons = [];
-
-        if (this.allowRemove || this.handleIcon !== false) {
-          if (this.uploadType !== 'file' && this.handleIcon !== false || this.uploadType === 'file' && this.handleIcon) {
-            icons.push(this.makeHandleIcon(file, index));
-          }
-
-          if (this.allowRemove) {
-            icons.push(this.makeRemoveIcon(file, index));
-          }
-
-          return vue.createVNode("div", {
-            "class": "fc-upload-cover"
-          }, [icons]);
-        }
-      },
-      makeFiles: function makeFiles() {
-        var _this3 = this;
-
-        return this.uploadList.map(function (file, index) {
-          return vue.createVNode("div", {
-            "key": _this3.key(index),
-            "class": "fc-files"
-          }, [file.percentage !== undefined && file.status !== 'success' ? _this3.makeProgress(file, index) : [_this3.makeItem(file, index), _this3.makeIcons(file, index)]]);
-        });
-      },
-      makeUpload: function makeUpload() {
-        var _this$$slots$default,
-            _this$$slots,
-            _this4 = this;
-
-        var isShow = !this.limit || this.limit > this.uploadList.length;
-        return vue.createVNode(vue.resolveComponent("ElUpload"), vue.mergeProps(this.$attrs, {
-          "showFileList": false,
-          "fileList": this.fileList,
-          "ref": "upload",
-          "style": {
-            display: 'inline-block'
-          },
-          "key": this.key('upload')
-        }), _objectSpread2({
-          "default": function _default() {
-            return [isShow ? ((_this$$slots$default = (_this$$slots = _this4.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)) || vue.createVNode("div", {
-              "class": "fc-upload-btn"
-            }, [vue.createVNode("i", {
-              "class": "el-icon-upload2"
-            }, null)]) : undefined];
-          }
-        }, getSlot(this.$slots, ['default'])));
-      },
-      update: function update() {
-        var files = this.$refs.upload.uploadFiles.map(function (file) {
+      update: function update(fileList) {
+        var files = fileList.map(function (file) {
           return file.url;
         }).filter(function (url) {
           return url !== undefined;
         });
-
-        if (this.cacheFiles.length !== files.length) {
-          this.cacheFiles = _toConsumableArray(files);
-          this.$emit('update:modelValue', this.limit === 1 ? files[0] || '' : files);
-        }
+        this.$emit('update:modelValue', this.limit === 1 ? files[0] || '' : files);
       },
       handleCancel: function handleCancel() {
         this.previewVisible = false;
+      },
+      handleChange: function handleChange(file, fileList) {
+        this.$emit.apply(this, ['change'].concat(Array.prototype.slice.call(arguments)));
+
+        if (file.status === 'success') {
+          this.update(fileList);
+        }
+      },
+      handleRemove: function handleRemove(file, fileList) {
+        this.$emit.apply(this, ['remove'].concat(Array.prototype.slice.call(arguments)));
+        this.update(fileList);
       }
     },
     render: function render() {
-      var _this5 = this;
+      var _this$$slots$default,
+          _this$$slots,
+          _this = this;
 
-      return vue.createVNode("div", {
-        "class": "_fc-upload"
-      }, [[this.$attrs.showFileList ? [] : this.makeFiles(), this.makeUpload()], vue.createVNode(vue.resolveComponent("ElDialog"), {
+      return vue.createVNode(vue.Fragment, null, [vue.createVNode(vue.resolveComponent("ElUpload"), vue.mergeProps({
+        "key": this.modelValue.length,
+        "list-type": "picture-card"
+      }, this.$attrs, {
+        "class": {
+          '_fc-exceed': this.$attrs.limit ? this.$attrs.limit <= this.modelValue.length : false
+        },
+        "onPreview": this.handlePreview,
+        "onChange": this.handleChange,
+        "onRemove": this.handleRemove,
+        "fileList": this.fileList
+      }), _objectSpread2({
+        "default": function _default() {
+          return [((_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots)) || vue.createVNode(vue.resolveComponent("ElIcon"), null, {
+            "default": function _default() {
+              return [vue.createVNode(vue.resolveComponent("upload"), null, null)];
+            }
+          })];
+        }
+      }, getSlot(this.$slots, ['default']))), vue.createVNode(vue.resolveComponent("ElDialog"), {
         "appendToBody": true,
         "modal": this.previewMask,
         "title": this.modalTitle,
@@ -1244,24 +1110,11 @@
       }, {
         "default": function _default() {
           return [vue.createVNode("img", {
-            "alt": "example",
             "style": "width: 100%",
-            "src": _this5.previewImage
+            "src": _this.previewImage
           }, null)];
         }
       })]);
-    },
-    mounted: function mounted() {
-      var _this6 = this;
-
-      this.uploadList = this.$refs.upload.uploadFiles;
-      this.$watch(function () {
-        return _this6.$refs.upload.uploadFiles;
-      }, function () {
-        _this6.update();
-      }, {
-        deep: true
-      });
     }
   });
 
@@ -1292,9 +1145,9 @@
     return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !vue.isVNode(s);
   }
 
-  var NAME$4 = 'fcGroup';
+  var NAME$3 = 'fcGroup';
   var Group = vue.defineComponent({
-    name: NAME$4,
+    name: NAME$3,
     props: {
       field: String,
       rule: Array,
@@ -1337,9 +1190,9 @@
       onBeforeAdd: {
         type: Function,
         "default": function _default() {}
-      }
+      },
+      formCreateInject: Object
     },
-    inject: ['formCreateInject'],
     data: function data() {
       return {
         len: 0,
@@ -1517,24 +1370,31 @@
         this.input(this.modelValue);
       },
       addIcon: function addIcon(key) {
-        return vue.createVNode("i", {
+        return vue.createVNode(vue.resolveComponent("el-icon"), {
           "key": "a".concat(key),
-          "class": "el-icon-circle-plus-outline",
           "style": "font-size:".concat(this.fontSize, "px;cursor:").concat(this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer', ";"),
           "onClick": this.add
-        }, null);
+        }, {
+          "default": function _default() {
+            return [vue.createVNode(vue.resolveComponent("circle-plus"), null, null)];
+          }
+        });
       },
       delIcon: function delIcon(index, key) {
         var _this7 = this;
 
-        return vue.createVNode("i", {
+        return vue.createVNode(vue.resolveComponent("ElIcon"), {
           "key": "d".concat(key),
           "class": "el-icon-remove-outline",
           "style": "font-size:".concat(this.fontSize, "px;cursor:").concat(this.disabled ? 'not-allowed;color:#c9cdd4' : 'pointer;color:#606266', ";"),
           "onClick": function onClick() {
             return _this7.del(index, key);
           }
-        }, null);
+        }, {
+          "default": function _default() {
+            return [vue.createVNode(vue.resolveComponent("remove"), null, null)];
+          }
+        });
       },
       makeIcon: function makeIcon(total, index, key) {
         var _this8 = this;
@@ -1590,12 +1450,12 @@
         vm: this,
         add: this.add
       }) : vue.createVNode("i", {
-        "key": 'a_def',
+        "key": 1,
         "class": "el-icon-circle-plus-outline",
         "style": "font-size:".concat(this.fontSize, "px;vertical-align:middle;color:").concat(this.disabled ? '#c9cdd4;cursor: not-allowed' : '#606266;cursor:pointer', ";"),
         "onClick": this.add
       }, null) : vue.createVNode("div", {
-        "key": 'con'
+        "key": 2
       }, [keys.map(function (key, index) {
         var _slot;
 
@@ -1653,9 +1513,9 @@
     }
   });
 
-  var NAME$3 = 'fcSubForm';
+  var NAME$2 = 'fcSubForm';
   var Sub = vue.defineComponent({
-    name: NAME$3,
+    name: NAME$2,
     props: {
       rule: Array,
       options: {
@@ -1680,9 +1540,9 @@
       syncDisabled: {
         type: Boolean,
         "default": true
-      }
+      },
+      formCreateInject: Object
     },
-    inject: ['formCreateInject'],
     data: function data() {
       return {
         cacheValue: {},
@@ -1743,10 +1603,10 @@
 
   var components = [Checkbox, Frame, Radio, Select, Tree, Upload, Group, Sub];
 
-  var NAME$2 = 'FormCreate';
+  var NAME$1 = 'FormCreate';
   function $FormCreate(FormCreate) {
     return vue.defineComponent({
-      name: NAME$2,
+      name: NAME$1,
       props: {
         rule: {
           type: Array,
@@ -1763,7 +1623,8 @@
         },
         extendOption: Boolean,
         modelValue: Object,
-        api: Object
+        api: Object,
+        name: String
       },
       emits: ['update:api', 'update:modelValue', 'mounted', 'submit', 'change', 'emit-event', 'control', 'remove-rule', 'remove-field', 'sync', 'reload', 'repeat-field', 'update'],
       render: function render() {
@@ -1779,6 +1640,7 @@
             modelValue = _toRefs.modelValue;
 
         var data = vue.reactive({
+          ctxInject: {},
           destroyed: false,
           isShow: true,
           unique: 1,
@@ -2427,7 +2289,8 @@
 
         if (ctx) {
           if (child) {
-            rules = ctx.rule.children;
+            rules = ctx.getPending('children', ctx.rule.children);
+            if (!Array.isArray(rules)) return;
             index = ctx.rule.children.length - 1;
           } else {
             index = ctx.root.indexOf(ctx.origin);
@@ -2444,7 +2307,8 @@
 
         if (ctx) {
           if (child) {
-            rules = ctx.rule.children;
+            rules = ctx.getPending('children', ctx.rule.children);
+            if (!Array.isArray(rules)) return;
           } else {
             index = ctx.root.indexOf(ctx.origin);
             rules = ctx.root;
@@ -2748,9 +2612,9 @@
     return val == null ? '' : _typeof(val) === 'object' ? JSON.stringify(val, null, 2) : String(val);
   }
 
-  var id$1 = 0;
+  var id$2 = 0;
   function uniqueId() {
-    return Math.random().toString(36).substr(3, 3) + Number("".concat(Date.now()).concat(++id$1)).toString(36);
+    return Math.random().toString(36).substr(3, 3) + Number("".concat(Date.now()).concat(++id$2)).toString(36);
   }
 
   function deepSet(data, idx, val) {
@@ -2813,7 +2677,7 @@
           ctx.initProp();
           this.mergeGlobal(ctx);
           ctx.initNone();
-          var slots = this.renderChildren(ctx);
+          var slots = this.renderChildren(ctx.loadChildrenPending(), ctx);
           var def = slots["default"];
           def && slotBag.setSlot(ctx.rule.slot, function () {
             return def();
@@ -2840,8 +2704,15 @@
         ctx.prop = mergeRule({}, [this.cacheConfig[ctx.trueType].value, ctx.prop]);
       },
       setOptions: function setOptions(ctx) {
-        if (ctx.prop.optionsTo && ctx.prop.options) {
-          deepSet(ctx.prop, ctx.prop.optionsTo, ctx.prop.options);
+        var opt = ctx.loadPending({
+          key: 'options',
+          origin: ctx.prop.options,
+          def: []
+        });
+        ctx.prop.options = opt;
+
+        if (ctx.prop.optionsTo && opt) {
+          deepSet(ctx.prop, ctx.prop.optionsTo, opt);
         }
       },
       deepSet: function deepSet$1(ctx) {
@@ -2870,34 +2741,37 @@
       renderCtx: function renderCtx(ctx, parent) {
         var _this4 = this;
 
-        if (ctx.type === 'hidden') return;
-        var rule = ctx.rule;
-        var preview = this.options.preview || false;
-
-        if (!this.cache[ctx.id] || this.cache[ctx.id].slot !== rule.slot) {
-          var vn;
-          ctx.initProp();
-          this.mergeGlobal(ctx);
-          ctx.initNone();
-          this.$manager.tidyRule(ctx);
-          this.deepSet(ctx);
-          this.setOptions(ctx);
-          this.ctxProp(ctx);
-          var prop = ctx.prop;
-
-          if (prop.hidden) {
-            this.setCache(ctx, undefined, parent);
-            return;
-          }
+        try {
+          if (ctx.type === 'hidden') return;
+          var rule = ctx.rule;
+          var preview = this.options.preview || false;
+
+          if (!this.cache[ctx.id] || this.cache[ctx.id].slot !== rule.slot) {
+            var vn;
+            ctx.initProp();
+            this.mergeGlobal(ctx);
+            ctx.initNone();
+            this.$manager.tidyRule(ctx);
+            this.deepSet(ctx);
+            this.setOptions(ctx);
+            this.ctxProp(ctx);
+            var prop = ctx.prop;
+            prop.props.formCreateInject = this.injectProp(ctx);
+
+            if (prop.hidden) {
+              this.setCache(ctx, undefined, parent);
+              return;
+            }
 
-          vn = function vn() {
-            return _this4.item(ctx, function () {
+            vn = function vn() {
               var children = {};
 
+              var _load = ctx.loadChildrenPending();
+
               if (ctx.parser.renderChildren) {
-                children = ctx.parser.renderChildren(ctx);
+                children = ctx.parser.renderChildren(_load, ctx);
               } else if (ctx.parser.loadChildren !== false) {
-                children = _this4.renderChildren(ctx);
+                children = _this4.renderChildren(_load, ctx);
               }
 
               var slot = _this4.getTypeSlot(ctx.type);
@@ -2927,15 +2801,22 @@
                 _vn = _this4.display(_vn);
               }
 
+              _this4.setCache(ctx, function () {
+                return _vn;
+              }, parent);
+
               return _vn;
-            });
-          };
+            };
 
-          this.setCache(ctx, vn, parent);
-          return vn;
-        }
+            this.setCache(ctx, vn, parent);
+            return vn;
+          }
 
-        return this.getCache(ctx);
+          return this.getCache(ctx);
+        } catch (e) {
+          console.error(e);
+          return;
+        }
       },
       getModelField: function getModelField(ctx) {
         return ctx.rule.modelField || ctx.parser.modelField || this.fc.modelFields[this.vNode.aliasMap[ctx.field]] || this.fc.modelFields[ctx.field] || this.fc.modelFields[ctx.originType] || 'modelValue';
@@ -2969,30 +2850,36 @@
           return vn;
         }
       },
-      item: function item(ctx, vn) {
-        return this.vNode.h('FcFragment', {
-          key: ctx.prop.key,
-          formCreateInject: this.injectProp(ctx)
-        }, vn);
-      },
       isFragment: function isFragment(ctx) {
         return ctx.type === 'fragment' || ctx.type === 'template';
       },
       injectProp: function injectProp(ctx) {
         var _this6 = this;
 
-        return {
+        var state = this.vm.setupState;
+
+        if (!state.ctxInject[ctx.id]) {
+          state.ctxInject[ctx.id] = {
+            api: this.$handle.api,
+            form: this.fc.create,
+            subForm: function subForm(_subForm) {
+              _this6.$handle.addSubForm(ctx, _subForm);
+            },
+            options: [],
+            children: [],
+            preview: false,
+            field: ctx.field,
+            rule: ctx.rule
+          };
+        }
+
+        var inject = state.ctxInject[ctx.id];
+        extend(inject, {
           preview: this.options.preview || false,
-          api: this.$handle.api,
-          form: this.fc.create,
-          subForm: function subForm(_subForm) {
-            _this6.$handle.addSubForm(ctx, _subForm);
-          },
-          field: ctx.field,
-          options: ctx.prop.options || [],
-          children: ctx.rule.children,
-          rule: ctx.rule
-        };
+          options: ctx.prop.options,
+          children: ctx.loadChildrenPending()
+        });
+        return inject;
       },
       ctxProp: function ctxProp(ctx, custom) {
         var _this7 = this;
@@ -3036,10 +2923,9 @@
       onInput: function onInput(ctx, value) {
         this.$handle.onInput(ctx, value);
       },
-      renderChildren: function renderChildren(ctx) {
+      renderChildren: function renderChildren(children, ctx) {
         var _this8 = this;
 
-        var children = ctx.rule.children;
         if (!is.trueArray(children)) return {};
         var slotBag = makeSlotBag();
         children.map(function (child) {
@@ -3105,7 +2991,7 @@
     });
   }
 
-  var id = 1;
+  var id$1 = 1;
   function Render(handle) {
     extend(this, {
       $handle: handle,
@@ -3113,7 +2999,7 @@
       vm: handle.vm,
       $manager: handle.$manager,
       vNode: new handle.fc.CreateNode(handle.vm),
-      id: id++
+      id: id$1++
     });
     funcProxy(this, {
       options: function options() {
@@ -3361,6 +3247,7 @@
       rule: rule,
       origin: rule.__origin__ || rule,
       name: rule.name,
+      pending: {},
       none: false,
       watch: [],
       linkOn: [],
@@ -3383,6 +3270,102 @@
     this.update(handle, true);
   }
   extend(RuleContext.prototype, {
+    loadChildrenPending: function loadChildrenPending() {
+      var _this = this;
+
+      var children = this.rule.children || [];
+      if (Array.isArray(children)) return children;
+      return this.loadPending({
+        key: 'children',
+        origin: children,
+        def: [],
+        onLoad: function onLoad(data) {
+          _this.$handle && _this.$handle.loadChildren(data, _this);
+        },
+        onUpdate: function onUpdate(value, oldValue) {
+          if (_this.$handle) {
+            value === oldValue ? _this.$handle.loadChildren(value, _this) : _this.$handle.updateChildren(_this, value, oldValue);
+          }
+        },
+        onReload: function onReload(value) {
+          if (_this.$handle) {
+            _this.$handle.updateChildren(_this, [], value);
+          } else {
+            delete _this.pending.children;
+          }
+        }
+      });
+    },
+    loadPending: function loadPending(config) {
+      var _this2 = this;
+
+      var key = config.key,
+          origin = config.origin,
+          def = config.def,
+          onLoad = config.onLoad,
+          onReload = config.onReload,
+          onUpdate = config.onUpdate;
+
+      if (this.pending[key] && this.pending[key].origin === origin) {
+        return this.getPending(key, def);
+      }
+
+      delete this.pending[key];
+      var value = origin;
+
+      if (is.Function(origin)) {
+        var source = invoke(function () {
+          return origin({
+            rule: _this2.rule,
+            api: _this2.$api,
+            update: function update(data) {
+              var value = data || def;
+
+              var oldValue = _this2.getPending(key, def);
+
+              _this2.setPending(key, origin, value);
+
+              onUpdate && onUpdate(value, oldValue);
+            },
+            reload: function reload() {
+              var oldValue = _this2.getPending(key, def);
+
+              delete _this2.pending[key];
+              onReload && onReload(oldValue);
+              _this2.$api && _this2.$api.sync(_this2.rule);
+            }
+          });
+        });
+
+        if (source && is.Function(source.then)) {
+          source.then(function (data) {
+            var value = data || def;
+
+            _this2.setPending(key, origin, value);
+
+            onLoad && onLoad(value);
+            _this2.$api && _this2.$api.sync(_this2.rule);
+          });
+          value = def;
+          this.setPending(key, origin, value);
+        } else {
+          value = source || def;
+          this.setPending(key, origin, value);
+          onLoad && onLoad(value);
+        }
+      }
+
+      return value;
+    },
+    getPending: function getPending(key, def) {
+      return this.pending[key] && this.pending[key].value || def;
+    },
+    setPending: function setPending(key, origin, value) {
+      this.pending[key] = {
+        origin: origin,
+        value: vue.reactive(value)
+      };
+    },
     effectData: function effectData(name) {
       if (!this.payload[name]) {
         this.payload[name] = {};
@@ -3406,13 +3389,13 @@
       parser.init(this);
     },
     initProp: function initProp() {
-      var _this = this;
+      var _this3 = this;
 
       var rule = _objectSpread2({}, this.rule);
 
       delete rule.children;
       this.prop = mergeProps([rule].concat(_toConsumableArray(Object.keys(this.payload).map(function (k) {
-        return _this.payload[k];
+        return _this3.payload[k];
       })), [this.computed]));
     },
     initNone: function initNone() {
@@ -3439,10 +3422,10 @@
       this.$handle.appendLink(this);
     },
     watchTo: function watchTo() {
-      var _this2 = this;
+      var _this4 = this;
 
       vue.nextTick(function () {
-        _this2.$handle && _this2.$handle.watchCtx(_this2);
+        _this4.$handle && _this4.$handle.watchCtx(_this4);
       });
     },
     "delete": function _delete() {
@@ -3472,15 +3455,15 @@
       this.ctrlRule = [];
     },
     rm: function rm() {
-      var _this3 = this;
+      var _this5 = this;
 
       var _rm = function _rm() {
-        var index = _this3.root.indexOf(_this3.origin);
+        var index = _this5.root.indexOf(_this5.origin);
 
         if (index > -1) {
-          _this3.root.splice(index, 1);
+          _this5.root.splice(index, 1);
 
-          _this3.$handle && _this3.$handle.refresh();
+          _this5.$handle && _this5.$handle.refresh();
         }
       };
 
@@ -3491,17 +3474,17 @@
       }
 
       this.$handle.noWatch(function () {
-        _this3.$handle.deferSyncValue(function () {
-          _this3.rmCtrl();
+        _this5.$handle.deferSyncValue(function () {
+          _this5.rmCtrl();
 
           _rm();
 
-          _this3.$handle.rmCtx(_this3);
+          _this5.$handle.rmCtx(_this5);
 
-          extend(_this3, {
+          extend(_this5, {
             root: []
           });
-        }, _this3.input);
+        }, _this5.input);
       });
     },
     update: function update(handle, init) {
@@ -3540,7 +3523,6 @@
         });
         fullRule(rule);
         this.appendValue(rule);
-        rule.options = Array.isArray(rule.options) ? rule.options : [];
         [rule, rule['prefix'], rule['suffix']].forEach(function (item) {
           if (!item) {
             return;
@@ -3660,7 +3642,7 @@
           if (!is.Object(_rule) || !getRule(_rule).type) return err('未定义生成规则的 type 字段', _rule);
 
           if (_rule.__fc__ && _rule.__fc__.root === rules && _this6.ctxs[_rule.__fc__.id]) {
-            loadChildren(_rule.__fc__.rule.children, _rule.__fc__);
+            loadChildren(_rule.__fc__.loadChildrenPending(), _rule.__fc__);
             return _rule.__fc__;
           }
 
@@ -3731,7 +3713,10 @@
           _this6.setCtx(ctx);
 
           !isCopy && !isInit && _this6.effect(ctx, 'load');
-          ctx.parser.loadChildren === false || loadChildren(ctx.rule.children, ctx);
+
+          var _load = ctx.loadChildrenPending();
+
+          ctx.parser.loadChildren === false || loadChildren(_load, ctx);
 
           if (!parent) {
             var _preIndex = preIndex(index);
@@ -3827,7 +3812,7 @@
             if (valid) {
               flag = true;
               var ruleCon = {
-                type: 'template',
+                type: 'fragment',
                 "native": true,
                 __ctrl: true,
                 children: rule
@@ -4167,7 +4152,7 @@
           var flag = key === 'children';
           ctx.refRule[key] = ref;
           ctx.watch.push(vue.watch(flag ? function () {
-            return _toConsumableArray(ref.value || []);
+            return is.Function(ref.value) ? ref.value : _toConsumableArray(ref.value || []);
           } : function () {
             return ref.value;
           }, function (_, o) {
@@ -4197,20 +4182,16 @@
               ctx.updateType();
 
               _this.bindParser(ctx);
-            } else if (key === 'children') {
-              _this.deferSyncValue(function () {
-                o && o.forEach(function (child) {
-                  if ((n || []).indexOf(child) === -1 && child && !is.String(child) && child.__fc__ && !_this.ctxs[child.__fc__.id]) {
-                    _this.rmCtx(child.__fc__);
-                  }
-                });
+            } else if (flag) {
+              if (is.Function(o)) {
+                o = ctx.getPending('children', []);
+              }
 
-                if (is.trueArray(n)) {
-                  _this.loadChildren(n, ctx);
+              if (is.Function(n)) {
+                n = ctx.loadChildrenPending();
+              }
 
-                  _this.bus.$emit('update', _this.api);
-                }
-              });
+              _this.updateChildren(ctx, n, o);
             }
 
             _this.$render.clearCache(ctx);
@@ -4237,15 +4218,32 @@
 
         this.watchEffect(ctx);
       },
-      rmSub: function rmSub(sub) {
+      updateChildren: function updateChildren(ctx, n, o) {
         var _this2 = this;
 
+        this.deferSyncValue(function () {
+          o && o.forEach(function (child) {
+            if ((n || []).indexOf(child) === -1 && child && !is.String(child) && child.__fc__) {
+              _this2.rmCtx(child.__fc__);
+            }
+          });
+
+          if (is.trueArray(n)) {
+            _this2.loadChildren(n, ctx);
+
+            _this2.bus.$emit('update', _this2.api);
+          }
+        });
+      },
+      rmSub: function rmSub(sub) {
+        var _this3 = this;
+
         is.trueArray(sub) && sub.forEach(function (r) {
-          r && r.__fc__ && _this2.rmCtx(r.__fc__);
+          r && r.__fc__ && _this3.rmCtx(r.__fc__);
         });
       },
       rmCtx: function rmCtx(ctx) {
-        var _this3 = this;
+        var _this4 = this;
 
         if (ctx.deleted) return;
         var id = ctx.id,
@@ -4255,20 +4253,23 @@
         $del(this.ctxs, id);
         $del(this.formData, id);
         $del(this.subForm, id);
+        $del(this.vm.setupState.ctxInject, id);
         input && this.rmIdCtx(ctx, field, 'field');
         name && this.rmIdCtx(ctx, name, 'name');
         this.deferSyncValue(function () {
-          if (!_this3.reloading) {
+          if (!_this4.reloading) {
             if (ctx.parser.loadChildren !== false) {
-              if (is.trueArray(ctx.rule.children)) {
-                ctx.rule.children.forEach(function (h) {
-                  return h.__fc__ && _this3.rmCtx(h.__fc__);
+              var children = ctx.getPending('children', ctx.rule.children);
+
+              if (is.trueArray(children)) {
+                children.forEach(function (h) {
+                  return h.__fc__ && _this4.rmCtx(h.__fc__);
                 });
               }
             }
 
-            if (ctx.root === _this3.rules) {
-              _this3.vm.setupState.renderRule();
+            if (ctx.root === _this4.rules) {
+              _this4.vm.setupState.renderRule();
             }
           }
         }, input);
@@ -4387,7 +4388,7 @@
             input = _ref.input,
             type = _ref.type,
             custom = _ref.custom;
-        if (!type || type === 'fcFragment') return;
+        if (!type || ['fcFragment', 'fragment'].indexOf(type) > -1) return;
         var effect = custom ? custom : rule.effect || {};
         Object.keys(effect).forEach(function (attr) {
           var p = _this4.providers[attr];
@@ -4584,26 +4585,8 @@
     xhr.send(formData);
   }
 
-  var NAME$1 = 'FcFragment';
+  var NAME = 'fcFragment';
   var fragment = vue.defineComponent({
-    name: NAME$1,
-    inheritAttrs: false,
-    props: ['formCreateInject'],
-    setup: function setup(props) {
-      var data = vue.toRef(props, 'formCreateInject');
-      var $inject = vue.reactive(_objectSpread2({}, data.value));
-      vue.watch(data, function () {
-        extend($inject, data.value);
-      });
-      vue.provide('formCreateInject', $inject);
-    },
-    render: function render() {
-      return this.$slots["default"]();
-    }
-  });
-
-  var NAME = 'FcVnode';
-  var vnode = vue.defineComponent({
     name: NAME,
     inheritAttrs: false,
     props: ['vnode'],
@@ -4646,8 +4629,14 @@
         return makeDirective(data, this.h(tag, toProps(data), children));
       },
       h: function h(tag, data, children) {
+        var isNativeTag = vue.getCurrentInstance().appContext.config.isNativeTag(tag);
+
+        if (isNativeTag) {
+          delete data.formCreateInject;
+        }
+
         try {
-          return vue.createVNode(vue.getCurrentInstance().appContext.config.isNativeTag(tag) ? tag : vue.resolveComponent(tag), data, children);
+          return vue.createVNode(isNativeTag ? tag : vue.resolveComponent(tag), data, children);
         } catch (e) {
           console.error(e);
           return vue.createVNode('');
@@ -4690,7 +4679,7 @@
         return _super.apply(this, arguments);
       }
 
-      return _createClass(CustomManager);
+      return CustomManager;
     }(Manager);
 
     Object.assign(CustomManager.prototype, proto);
@@ -4835,6 +4824,25 @@
     return true;
   }
 
+  var name$6 = 'html';
+  var html = {
+    name: name$6,
+    loadChildren: false,
+    render: function render(children, ctx) {
+      ctx.prop.props.innerHTML = children["default"]();
+      return ctx.vNode.make(ctx.prop.props.tag || 'div', ctx.prop);
+    },
+    renderChildren: function renderChildren(children) {
+      return {
+        "default": function _default() {
+          return children.filter(function (v) {
+            return is.String(v);
+          }).join('');
+        }
+      };
+    }
+  };
+
   function parseProp(name, id) {
     var prop;
 
@@ -4863,8 +4871,10 @@
     arrayAttrs.push.apply(arrayAttrs, _toConsumableArray(array));
     normalAttrs.push.apply(normalAttrs, _toConsumableArray(normal));
     appendProto([].concat(_toConsumableArray(key), _toConsumableArray(array), _toConsumableArray(normal)));
-  } //todo 表单嵌套
+  }
 
+  var id = 1;
+  var instance = {}; //todo 表单嵌套
 
   function FormCreateFactory(config) {
     var components = _defineProperty({}, fragment.name, fragment);
@@ -4872,6 +4882,7 @@
     var parsers = {};
     var directives = {};
     var modelFields = {};
+    var useApps = [];
     var providers = {
       fetch: $fetch
     };
@@ -4883,6 +4894,14 @@
     var CreateNode = CreateNodeFactory();
     exportAttrs(config.attrs || {});
 
+    function getApi(name) {
+      return instance[name];
+    }
+
+    function useApp(fn) {
+      useApps.push(fn);
+    }
+
     function directive() {
       var data = nameProp.apply(void 0, arguments);
       if (data.id && data.prop) directives[data.id] = data.prop;
@@ -4951,7 +4970,7 @@
     }
 
     function $vnode() {
-      return vnode;
+      return fragment;
     } //todo 检查回调函数作用域
 
 
@@ -4962,7 +4981,11 @@
 
     function create(rules, option) {
       var app = createFormApp(rules, option || {});
-      config.appUse && config.appUse(app);
+      useApps.forEach(function (v) {
+        invoke(function () {
+          return v(create, app);
+        });
+      });
       var div = document.createElement('div');
       ((option === null || option === void 0 ? void 0 : option.el) || document.body).appendChild(div);
       var vm = app.mount(div);
@@ -4981,6 +5004,7 @@
       var _this = this;
 
       extend(this, {
+        id: id++,
         create: create,
         vm: vm,
         manager: createManager(config.manager),
@@ -4988,6 +5012,7 @@
         providers: providers,
         modelFields: modelFields,
         rules: vm.props.rule,
+        name: vm.props.name,
         prop: {
           components: components,
           directives: directives
@@ -5012,6 +5037,10 @@
       extend(vm.appContext.components, components);
       extend(vm.appContext.directives, directives);
       this.$handle = new Handler(this);
+
+      if (this.name) {
+        instance[this.name] = this.api();
+      }
     }
 
     extend(FormCreate.prototype, {
@@ -5077,6 +5106,10 @@
         this.$handle.mounted();
       },
       unmount: function unmount() {
+        if (this.name) {
+          delete instance[this.name];
+        }
+
         this.unwatch && this.unwatch();
         this.$handle.reloadRule([]);
       },
@@ -5110,17 +5143,19 @@
         $form: $form,
         parseFn: parseFn,
         parseJson: parseJson,
-        toJson: toJson
+        toJson: toJson,
+        useApp: useApp,
+        getApi: getApi
       });
     }
 
     function useStatic(formCreate) {
       extend(formCreate, {
         create: create,
-        install: function install(Vue, options) {
+        install: function install(app, options) {
           globalConfig = _objectSpread2(_objectSpread2({}, globalConfig), options || {});
-          if (Vue._installedFormCreate === true) return;
-          Vue._installedFormCreate = true;
+          if (app._installedFormCreate === true) return;
+          app._installedFormCreate = true;
 
           var $formCreate = function $formCreate(rules) {
             var opt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -5128,9 +5163,13 @@
           };
 
           useAttr($formCreate);
-          Vue.config.globalProperties.$formCreate = $formCreate;
-          Vue.component('FormCreate', $form());
-          Vue.component('fc-vnode', vnode);
+          app.config.globalProperties.$formCreate = $formCreate;
+          app.component('FormCreate', $form());
+          useApps.forEach(function (v) {
+            invoke(function () {
+              return v(formCreate, app);
+            });
+          });
         }
       });
     }
@@ -5140,7 +5179,13 @@
     CreateNode.use({
       fragment: 'fcFragment'
     });
-    if (config.install) create.use(config);
+    config.install && create.use(config);
+    useApp(function (_, app) {
+      app.mixin({
+        props: ['formCreateInject']
+      });
+    });
+    parser(html);
     return create;
   }
 
@@ -5285,7 +5330,7 @@
   var PRE = 'el';
   var alias = {
     button: PRE + '-button',
-    icon: 'i',
+    icon: PRE + '-icon',
     slider: PRE + '-slider',
     rate: PRE + '-rate',
     upload: 'fc-upload',
@@ -5342,7 +5387,6 @@
         type: 'default',
         loading: false,
         disabled: false,
-        icon: 'el-icon-refresh',
         innerText: '重置',
         show: false,
         col: undefined,
@@ -5432,7 +5476,7 @@
         info: {
           trigger: 'hover',
           placement: 'top-start',
-          icon: 'el-icon-warning'
+          icon: true
         },
         title: {},
         col: {
@@ -5548,10 +5592,16 @@
 
         children[infoProp.align !== 'left' ? 'unshift' : 'push'](this.$r(mergeProps([infoProp, prop]), _defineProperty({}, titleProp.slot || (isTip ? 'default' : 'reference'), function () {
           return _this4.$r({
-            type: 'i',
-            "class": infoProp.icon === true ? 'el-icon-warning' : infoProp.icon,
+            type: 'ElIcon',
+            style: 'top:2px',
             key: "".concat(uni, "i")
-          }, {}, true);
+          }, {
+            "default": function _default() {
+              return _this4.$r({
+                type: infoProp.icon === true ? 'warning' : infoProp.icon
+              });
+            }
+          }, true);
         })));
       }
 
@@ -5908,12 +5958,18 @@
     Object.keys(maker$1).forEach(function (name) {
       FormCreate.maker[name] = maker$1[name];
     });
+
+    if (typeof window !== 'undefined' && window.ElementPlus) {
+      FormCreate.useApp(function (_, app) {
+        app.use(window.ElementPlus);
+      });
+    }
   }
 
   function elmFormCreate() {
     return FormCreateFactory({
       ui: 'element-ui',
-      version: '3.0.1',
+      version: '3.1.0',
       manager: manager,
       extendApi: extendApi,
       install: install,