@form-create/element-ui 3.0.1 → 3.1.0

package/dist/form-create.esm.js

@@ -1,19 +1,24 @@
 /*!
- * @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.
  */
-import { defineComponent, toRefs, inject, ref, toRef, watch, resolveComponent, createVNode, mergeProps as mergeProps$1, isVNode, nextTick, markRaw, reactive, getCurrentInstance, provide, onMounted, onBeforeUnmount, onUpdated, computed, customRef, withDirectives, resolveDirective, createApp, h } from 'vue';
+import { defineComponent, toRef, resolveComponent, createVNode, mergeProps as mergeProps$1, isVNode, nextTick, Fragment, markRaw, reactive, getCurrentInstance, provide, inject, toRefs, onMounted, onBeforeUnmount, onUpdated, watch, computed, customRef, withDirectives, resolveDirective, createApp, h, ref } from 'vue';
 
 function ownKeys(object, enumerableOnly) {
   var keys = Object.keys(object);
 
   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;
@@ -21,12 +26,19 @@ function ownKeys(object, enumerableOnly) {
 
 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;
@@ -35,11 +47,17 @@ function _objectSpread2(target) {
 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) {
@@ -48,25 +66,6 @@ function _classCallCheck(instance, Constructor) {
   }
 }
 
-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, {
@@ -94,9 +93,6 @@ function _inherits(subClass, superClass) {
       configurable: true
     }
   });
-  Object.defineProperty(subClass, "prototype", {
-    writable: false
-  });
   if (superClass) _setPrototypeOf(subClass, superClass);
 }
 
@@ -209,11 +205,12 @@ function getSlot(slots, exclude) {
   }, []);
 }
 
-var NAME$a = 'fcCheckbox';
+var NAME$9 = 'fcCheckbox';
 var Checkbox = defineComponent({
-  name: NAME$a,
+  name: NAME$9,
   inheritAttrs: false,
   props: {
+    formCreateInject: Object,
     modelValue: {
       type: Array,
       "default": function _default() {
@@ -224,51 +221,21 @@ var Checkbox = defineComponent({
   },
   emits: ['update:modelValue'],
   setup: function setup(props, _) {
-    var _toRefs = toRefs(inject('formCreateInject')),
-        options = _toRefs.options;
-
-    var trueValue = ref([]);
+    var options = toRef(props.formCreateInject, 'options', []);
     var value = 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;
-      }) : [];
-    };
-
-    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,
@@ -277,17 +244,23 @@ var Checkbox = defineComponent({
     var name = this.type === 'button' ? 'ElCheckboxButton' : 'ElCheckbox';
     var Type = resolveComponent(name);
     return createVNode(resolveComponent("ElCheckboxGroup"), mergeProps$1(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 createVNode(Type, mergeProps$1(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'])));
@@ -369,16 +342,16 @@ function styleInject(css, ref) {
   }
 }
 
-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]' && !isVNode(s);
 }
 
-var NAME$9 = 'fcFrame';
+var NAME$8 = 'fcFrame';
 var Frame = defineComponent({
-  name: NAME$9,
+  name: NAME$8,
   props: {
     type: {
       type: String,
@@ -399,7 +372,7 @@ var Frame = defineComponent({
     },
     icon: {
       type: String,
-      "default": 'el-icon-upload2'
+      "default": 'upload'
     },
     width: {
       type: String,
@@ -422,7 +395,10 @@ var Frame = defineComponent({
       "default": '关闭'
     },
     modalTitle: String,
-    handleIcon: [String, Boolean],
+    handleIcon: {
+      type: [String, Boolean],
+      "default": undefined
+    },
     title: String,
     allowRemove: {
       type: Boolean,
@@ -477,9 +453,9 @@ var Frame = defineComponent({
     okBtn: {
       type: Boolean,
       "default": true
-    }
+    },
+    formCreateInject: Object
   },
-  inject: ['formCreateInject'],
   emits: ['update:modelValue', 'change'],
   data: function data() {
     return {
@@ -496,9 +472,6 @@ var Frame = defineComponent({
     }
   },
   methods: {
-    key: function key(unique) {
-      return unique;
-    },
     close: function close() {
       this.closeModel(true);
     },
@@ -538,7 +511,7 @@ var Frame = defineComponent({
         }).toString(),
         readonly: true
       }, {
-        "key": this.key('input')
+        "key": 1
       }), {
         append: function append() {
           return createVNode(resolveComponent("ElButton"), {
@@ -549,14 +522,18 @@ var Frame = defineComponent({
           }, null);
         },
         suffix: function suffix() {
-          return _this.fileList.length ? createVNode("i", {
-            "class": "el-input__icon el-icon-circle-close",
+          return _this.fileList.length ? createVNode(resolveComponent("ElIcon"), {
+            "class": "el-input__icon",
             "onClick": function onClick() {
               _this.fileList = [];
 
               _this.input();
             }
-          }, null) : null;
+          }, {
+            "default": function _default() {
+              return [createVNode(resolveComponent("CircleClose"), null, null)];
+            }
+          }) : null;
         }
       });
     },
@@ -566,13 +543,13 @@ var Frame = defineComponent({
       }
 
       return createVNode("div", {
-        "key": this.key('group')
+        "key": 2
       }, [children]);
     },
     makeItem: function makeItem(index, children) {
       return createVNode("div", {
-        "class": "fc-files",
-        "key": this.key('file' + index)
+        "class": "_fc-files",
+        "key": '3' + index
       }, [children]);
     },
     valid: function valid(f) {
@@ -595,43 +572,53 @@ var Frame = defineComponent({
         }
 
         return 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 createVNode("i", {
-        "class": this.handleIcon === true || this.handleIcon === undefined ? 'el-icon-view' : this.handleIcon,
+      var Type = resolveComponent(this.handleIcon === true || this.handleIcon === undefined ? 'view' : this.handleIcon);
+      return createVNode(resolveComponent("ElIcon"), {
         "onClick": function onClick() {
           return _this2.handleClick(val);
         },
-        "key": this.key('hi' + index)
-      }, null);
+        "key": '5' + index
+      }, {
+        "default": function _default() {
+          return [createVNode(Type, null, null)];
+        }
+      });
     },
     makeRemoveIcon: function makeRemoveIcon(val, index) {
       var _this3 = this;
 
-      return createVNode("i", {
-        "class": "el-icon-delete",
+      return createVNode(resolveComponent("ElIcon"), {
         "onClick": function onClick() {
           return _this3.handleRemove(val);
         },
-        "key": this.key('ri' + index)
-      }, null);
+        "key": '6' + index
+      }, {
+        "default": function _default() {
+          return [createVNode(resolveComponent("delete"), null, null)];
+        }
+      });
     },
     makeFiles: function makeFiles() {
       var _this4 = this;
 
       return this.makeGroup(this.fileList.map(function (src, index) {
-        return _this4.makeItem(index, [createVNode("i", {
-          "class": "el-icon-tickets",
+        return _this4.makeItem(index, [createVNode(resolveComponent("ElIcon"), {
           "onClick": function onClick() {
             return _this4.handleClick(src);
           }
-        }, null), _this4.makeIcons(src, index)]);
+        }, {
+          "default": function _default() {
+            return [createVNode(resolveComponent("document"), null, null)];
+          }
+        }), _this4.makeIcons(src, index)]);
       }));
     },
     makeImages: function makeImages() {
@@ -646,15 +633,18 @@ var Frame = defineComponent({
     makeBtn: function makeBtn() {
       var _this6 = this;
 
+      var Type = resolveComponent(this.icon);
       return createVNode("div", {
-        "class": "fc-upload-btn",
+        "class": "_fc-upload-btn",
         "onClick": function onClick() {
           return _this6.showModel();
         },
-        "key": this.key('btn')
-      }, [createVNode("i", {
-        "class": this.icon
-      }, null)]);
+        "key": 7
+      }, [createVNode(resolveComponent("ElIcon"), null, {
+        "default": function _default() {
+          return [createVNode(Type, null, null)];
+        }
+      })]);
     },
     handleClick: function handleClick(src) {
       if (this.onHandle) {
@@ -805,7 +795,7 @@ var Frame = defineComponent({
           "src": src,
           "frameBorder": "0",
           "style": {
-            'height': height,
+            height: height,
             'border': '0 none',
             'width': '100%'
           }
@@ -834,11 +824,12 @@ var Frame = defineComponent({
   }
 });
 
-var NAME$8 = 'fcRadio';
+var NAME$7 = 'fcRadio';
 var Radio = defineComponent({
-  name: NAME$8,
+  name: NAME$7,
   inheritAttrs: false,
   props: {
+    formCreateInject: Object,
     modelValue: {
       type: [String, Number, Boolean],
       "default": ''
@@ -847,49 +838,21 @@ var Radio = defineComponent({
   },
   emits: ['update:modelValue'],
   setup: function setup(props, _) {
-    var _toRefs = toRefs(inject('formCreateInject')),
-        options = _toRefs.options;
-
-    var trueValue = ref([]);
+    var options = toRef(props.formCreateInject, 'options', []);
     var value = 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;
-      }, '');
-    };
-
-    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,
@@ -898,28 +861,35 @@ var Radio = defineComponent({
     var name = this.type === 'button' ? 'ElRadioButton' : 'ElRadio';
     var Type = resolveComponent(name);
     return createVNode(resolveComponent("ElRadioGroup"), mergeProps$1(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 createVNode(Type, mergeProps$1(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 = defineComponent({
-  name: NAME$7,
+  name: NAME$6,
   inheritAttrs: false,
   props: {
+    formCreateInject: Object,
     modelValue: {
       type: [Array, String, Number, Boolean, Object],
       "default": undefined
@@ -928,9 +898,7 @@ var Select = defineComponent({
   },
   emits: ['update:modelValue'],
   setup: function setup(props) {
-    var _toRefs = toRefs(inject('formCreateInject')),
-        options = _toRefs.options;
-
+    var options = toRef(props.formCreateInject, 'options', []);
     var value = toRef(props, 'modelValue');
 
     var _options = function _options() {
@@ -964,9 +932,9 @@ var Select = defineComponent({
   }
 });
 
-var NAME$6 = 'fcTree';
+var NAME$5 = 'fcTree';
 var Tree = defineComponent({
-  name: NAME$6,
+  name: NAME$5,
   inheritAttrs: false,
   formCreateParser: {
     mergeProp: function mergeProp(ctx) {
@@ -1028,7 +996,7 @@ var Tree = defineComponent({
   }
 });
 
-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) {
@@ -1043,37 +1011,21 @@ function getFileName(file) {
   return ('' + file).split('/').pop();
 }
 
-var NAME$5 = 'fcUpload';
+var NAME$4 = 'fcUpload';
 var Upload = 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() {
@@ -1081,13 +1033,6 @@ var Upload = defineComponent({
   },
   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) {
@@ -1097,141 +1042,62 @@ var Upload = defineComponent({
     }
   },
   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' ? createVNode("img", {
-        "src": file.url,
-        "key": this.key('img' + index)
-      }, null) : createVNode("i", {
-        "class": "el-icon-document",
-        "key": this.key('i' + index)
-      }, null);
-    },
-    makeRemoveIcon: function makeRemoveIcon(file, index) {
-      var _this = this;
-
-      return 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 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 createVNode(resolveComponent("ElProgress"), mergeProps$1({
-        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 createVNode("div", {
-          "class": "fc-upload-cover"
-        }, [icons]);
-      }
-    },
-    makeFiles: function makeFiles() {
-      var _this3 = this;
-
-      return this.uploadList.map(function (file, index) {
-        return 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 createVNode(resolveComponent("ElUpload"), mergeProps$1(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)) || createVNode("div", {
-            "class": "fc-upload-btn"
-          }, [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 createVNode("div", {
-      "class": "_fc-upload"
-    }, [[this.$attrs.showFileList ? [] : this.makeFiles(), this.makeUpload()], createVNode(resolveComponent("ElDialog"), {
+    return createVNode(Fragment, null, [createVNode(resolveComponent("ElUpload"), mergeProps$1({
+      "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)) || createVNode(resolveComponent("ElIcon"), null, {
+          "default": function _default() {
+            return [createVNode(resolveComponent("upload"), null, null)];
+          }
+        })];
+      }
+    }, getSlot(this.$slots, ['default']))), createVNode(resolveComponent("ElDialog"), {
       "appendToBody": true,
       "modal": this.previewMask,
       "title": this.modalTitle,
@@ -1240,24 +1106,11 @@ var Upload = defineComponent({
     }, {
       "default": function _default() {
         return [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
-    });
   }
 });
 
@@ -1288,9 +1141,9 @@ function _isSlot(s) {
   return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !isVNode(s);
 }
 
-var NAME$4 = 'fcGroup';
+var NAME$3 = 'fcGroup';
 var Group = defineComponent({
-  name: NAME$4,
+  name: NAME$3,
   props: {
     field: String,
     rule: Array,
@@ -1333,9 +1186,9 @@ var Group = defineComponent({
     onBeforeAdd: {
       type: Function,
       "default": function _default() {}
-    }
+    },
+    formCreateInject: Object
   },
-  inject: ['formCreateInject'],
   data: function data() {
     return {
       len: 0,
@@ -1513,24 +1366,31 @@ var Group = defineComponent({
       this.input(this.modelValue);
     },
     addIcon: function addIcon(key) {
-      return createVNode("i", {
+      return createVNode(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 [createVNode(resolveComponent("circle-plus"), null, null)];
+        }
+      });
     },
     delIcon: function delIcon(index, key) {
       var _this7 = this;
 
-      return createVNode("i", {
+      return createVNode(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 [createVNode(resolveComponent("remove"), null, null)];
+        }
+      });
     },
     makeIcon: function makeIcon(total, index, key) {
       var _this8 = this;
@@ -1586,12 +1446,12 @@ var Group = defineComponent({
       vm: this,
       add: this.add
     }) : 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) : createVNode("div", {
-      "key": 'con'
+      "key": 2
     }, [keys.map(function (key, index) {
       var _slot;
 
@@ -1649,9 +1509,9 @@ var Group = defineComponent({
   }
 });
 
-var NAME$3 = 'fcSubForm';
+var NAME$2 = 'fcSubForm';
 var Sub = defineComponent({
-  name: NAME$3,
+  name: NAME$2,
   props: {
     rule: Array,
     options: {
@@ -1676,9 +1536,9 @@ var Sub = defineComponent({
     syncDisabled: {
       type: Boolean,
       "default": true
-    }
+    },
+    formCreateInject: Object
   },
-  inject: ['formCreateInject'],
   data: function data() {
     return {
       cacheValue: {},
@@ -1739,10 +1599,10 @@ var Sub = defineComponent({
 
 var components = [Checkbox, Frame, Radio, Select, Tree, Upload, Group, Sub];
 
-var NAME$2 = 'FormCreate';
+var NAME$1 = 'FormCreate';
 function $FormCreate(FormCreate) {
   return defineComponent({
-    name: NAME$2,
+    name: NAME$1,
     props: {
       rule: {
         type: Array,
@@ -1759,7 +1619,8 @@ function $FormCreate(FormCreate) {
       },
       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() {
@@ -1775,6 +1636,7 @@ function $FormCreate(FormCreate) {
           modelValue = _toRefs.modelValue;
 
       var data = reactive({
+        ctxInject: {},
         destroyed: false,
         isShow: true,
         unique: 1,
@@ -2423,7 +2285,8 @@ function Api(h) {
 
       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);
@@ -2440,7 +2303,8 @@ function Api(h) {
 
       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;
@@ -2744,9 +2608,9 @@ function toString(val) {
   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) {
@@ -2809,7 +2673,7 @@ function useRender$1(Render) {
         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();
@@ -2836,8 +2700,15 @@ function useRender$1(Render) {
       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) {
@@ -2866,34 +2737,37 @@ function useRender$1(Render) {
     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);
@@ -2923,15 +2797,22 @@ function useRender$1(Render) {
               _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';
@@ -2965,30 +2846,36 @@ function useRender$1(Render) {
         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;
@@ -3032,10 +2919,9 @@ function useRender$1(Render) {
     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) {
@@ -3101,7 +2987,7 @@ function useRender$1(Render) {
   });
 }
 
-var id = 1;
+var id$1 = 1;
 function Render(handle) {
   extend(this, {
     $handle: handle,
@@ -3109,7 +2995,7 @@ function Render(handle) {
     vm: handle.vm,
     $manager: handle.$manager,
     vNode: new handle.fc.CreateNode(handle.vm),
-    id: id++
+    id: id$1++
   });
   funcProxy(this, {
     options: function options() {
@@ -3357,6 +3243,7 @@ function RuleContext(handle, rule) {
     rule: rule,
     origin: rule.__origin__ || rule,
     name: rule.name,
+    pending: {},
     none: false,
     watch: [],
     linkOn: [],
@@ -3379,6 +3266,102 @@ function RuleContext(handle, rule) {
   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: reactive(value)
+    };
+  },
   effectData: function effectData(name) {
     if (!this.payload[name]) {
       this.payload[name] = {};
@@ -3402,13 +3385,13 @@ extend(RuleContext.prototype, {
     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() {
@@ -3435,10 +3418,10 @@ extend(RuleContext.prototype, {
     this.$handle.appendLink(this);
   },
   watchTo: function watchTo() {
-    var _this2 = this;
+    var _this4 = this;
 
     nextTick(function () {
-      _this2.$handle && _this2.$handle.watchCtx(_this2);
+      _this4.$handle && _this4.$handle.watchCtx(_this4);
     });
   },
   "delete": function _delete() {
@@ -3468,15 +3451,15 @@ extend(RuleContext.prototype, {
     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();
       }
     };
 
@@ -3487,17 +3470,17 @@ extend(RuleContext.prototype, {
     }
 
     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) {
@@ -3536,7 +3519,6 @@ function useLoader(Handler) {
       });
       fullRule(rule);
       this.appendValue(rule);
-      rule.options = Array.isArray(rule.options) ? rule.options : [];
       [rule, rule['prefix'], rule['suffix']].forEach(function (item) {
         if (!item) {
           return;
@@ -3656,7 +3638,7 @@ function useLoader(Handler) {
         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__;
         }
 
@@ -3727,7 +3709,10 @@ function useLoader(Handler) {
         _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);
@@ -3823,7 +3808,7 @@ function useLoader(Handler) {
           if (valid) {
             flag = true;
             var ruleCon = {
-              type: 'template',
+              type: 'fragment',
               "native": true,
               __ctrl: true,
               children: rule
@@ -4163,7 +4148,7 @@ function useContext(Handler) {
         var flag = key === 'children';
         ctx.refRule[key] = ref;
         ctx.watch.push(watch(flag ? function () {
-          return _toConsumableArray(ref.value || []);
+          return is.Function(ref.value) ? ref.value : _toConsumableArray(ref.value || []);
         } : function () {
           return ref.value;
         }, function (_, o) {
@@ -4193,20 +4178,16 @@ function useContext(Handler) {
             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);
@@ -4233,15 +4214,32 @@ function useContext(Handler) {
 
       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,
@@ -4251,20 +4249,23 @@ function useContext(Handler) {
       $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);
@@ -4383,7 +4384,7 @@ function useEffect(Handler) {
           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];
@@ -4580,26 +4581,8 @@ function fetch(option) {
   xhr.send(formData);
 }
 
-var NAME$1 = 'FcFragment';
+var NAME = 'fcFragment';
 var fragment = defineComponent({
-  name: NAME$1,
-  inheritAttrs: false,
-  props: ['formCreateInject'],
-  setup: function setup(props) {
-    var data = toRef(props, 'formCreateInject');
-    var $inject = reactive(_objectSpread2({}, data.value));
-    watch(data, function () {
-      extend($inject, data.value);
-    });
-    provide('formCreateInject', $inject);
-  },
-  render: function render() {
-    return this.$slots["default"]();
-  }
-});
-
-var NAME = 'FcVnode';
-var vnode = defineComponent({
   name: NAME,
   inheritAttrs: false,
   props: ['vnode'],
@@ -4642,8 +4625,14 @@ function CreateNodeFactory() {
       return makeDirective(data, this.h(tag, toProps(data), children));
     },
     h: function h(tag, data, children) {
+      var isNativeTag = getCurrentInstance().appContext.config.isNativeTag(tag);
+
+      if (isNativeTag) {
+        delete data.formCreateInject;
+      }
+
       try {
-        return createVNode(getCurrentInstance().appContext.config.isNativeTag(tag) ? tag : resolveComponent(tag), data, children);
+        return createVNode(isNativeTag ? tag : resolveComponent(tag), data, children);
       } catch (e) {
         console.error(e);
         return createVNode('');
@@ -4686,7 +4675,7 @@ function createManager(proto) {
       return _super.apply(this, arguments);
     }
 
-    return _createClass(CustomManager);
+    return CustomManager;
   }(Manager);
 
   Object.assign(CustomManager.prototype, proto);
@@ -4831,6 +4820,25 @@ function run(inject, rule, api) {
   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;
 
@@ -4859,8 +4867,10 @@ function exportAttrs(attrs) {
   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);
@@ -4868,6 +4878,7 @@ function FormCreateFactory(config) {
   var parsers = {};
   var directives = {};
   var modelFields = {};
+  var useApps = [];
   var providers = {
     fetch: $fetch
   };
@@ -4879,6 +4890,14 @@ function FormCreateFactory(config) {
   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;
@@ -4947,7 +4966,7 @@ function FormCreateFactory(config) {
   }
 
   function $vnode() {
-    return vnode;
+    return fragment;
   } //todo 检查回调函数作用域
 
 
@@ -4958,7 +4977,11 @@ function FormCreateFactory(config) {
 
   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);
@@ -4977,6 +5000,7 @@ function FormCreateFactory(config) {
     var _this = this;
 
     extend(this, {
+      id: id++,
       create: create,
       vm: vm,
       manager: createManager(config.manager),
@@ -4984,6 +5008,7 @@ function FormCreateFactory(config) {
       providers: providers,
       modelFields: modelFields,
       rules: vm.props.rule,
+      name: vm.props.name,
       prop: {
         components: components,
         directives: directives
@@ -5008,6 +5033,10 @@ function FormCreateFactory(config) {
     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, {
@@ -5073,6 +5102,10 @@ function FormCreateFactory(config) {
       this.$handle.mounted();
     },
     unmount: function unmount() {
+      if (this.name) {
+        delete instance[this.name];
+      }
+
       this.unwatch && this.unwatch();
       this.$handle.reloadRule([]);
     },
@@ -5106,17 +5139,19 @@ function FormCreateFactory(config) {
       $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] : {};
@@ -5124,9 +5159,13 @@ function FormCreateFactory(config) {
         };
 
         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);
+          });
+        });
       }
     });
   }
@@ -5136,7 +5175,13 @@ function FormCreateFactory(config) {
   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;
 }
 
@@ -5281,7 +5326,7 @@ var parsers = [datePicker, hidden, input, slider, timePicker, row, select];
 var PRE = 'el';
 var alias = {
   button: PRE + '-button',
-  icon: 'i',
+  icon: PRE + '-icon',
   slider: PRE + '-slider',
   rate: PRE + '-rate',
   upload: 'fc-upload',
@@ -5338,7 +5383,6 @@ function getConfig() {
       type: 'default',
       loading: false,
       disabled: false,
-      icon: 'el-icon-refresh',
       innerText: '重置',
       show: false,
       col: undefined,
@@ -5428,7 +5472,7 @@ var manager = {
       info: {
         trigger: 'hover',
         placement: 'top-start',
-        icon: 'el-icon-warning'
+        icon: true
       },
       title: {},
       col: {
@@ -5544,10 +5588,16 @@ var manager = {
 
       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);
       })));
     }
 
@@ -5904,12 +5954,18 @@ function install(FormCreate) {
   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,