2022.01.29，修复部分bug，准备发布3.0正式版。

2024-09-20 04:44:45 +08:00 · 2022-01-29 19:49:51 +08:00 · 2022-01-29 19:49:51 +08:00 · eeb0065d80
commit eeb0065d80
parent 63cf735261
55 changed files with 96 additions and 102 deletions
--- a/install-render.js
+++ b/install-render.js
@ -32,10 +32,9 @@ const install = (app) => {
  })
 }

-// if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时主动调用install方法！！ */
-//   window.axios = axios
-//   install(window.Vue);
-// }
+if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时赋值axios！！ */
+  window.axios = axios
+}

 export default {
  install,
--- a/install.js
+++ b/install.js
@ -62,10 +62,9 @@ const install = (app) => {
  })
 }

-// if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时主动调用install方法！！ */
-//   window.axios = axios
-//   install(window.Vue);
-// }
+if (typeof window !== 'undefined' && window.Vue) { /* script方式引入时赋值axios！！ */
+  window.axios = axios
+}

 export default {
  install,
--- a/package.json
+++ b/package.json
@ -14,7 +14,7 @@
    "axios": "^0.24.0",
    "clipboard": "^2.0.8",
    "core-js": "^3.6.5",
-    "element-plus": "^1.3.0-beta.3",
+    "element-plus": "^1.3.0-beta.9",
    "file-saver": "^2.0.5",
    "mitt": "^3.0.0",
    "sortablejs": "1.14.0",
--- a/src/components/form-designer/form-widget/field-widget/button-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/button-widget.vue
@ -2,7 +2,7 @@
  <static-content-wrapper :designer="designer" :field="field" :design-state="designState"
                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
-    <el-button ref="fieldEditor" :type="field.options.type" :size="field.options.size"
+    <el-button ref="fieldEditor" :type="field.options.type" :size="widgetSize"
               :plain="field.options.plain" :round="field.options.round"
               :circle="field.options.circle" :icon="field.options.icon"
               :disabled="field.options.disabled"
--- a/src/components/form-designer/form-widget/field-widget/cascader-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/cascader-widget.vue
@ -5,7 +5,7 @@
    <div class="full-width-input">
      <el-cascader ref="fieldEditor" :options="field.options.optionItems" v-model="fieldModel"
                   :disabled="field.options.disabled"
-                   :size="field.options.size"
+                   :size="widgetSize"
                   :clearable="field.options.clearable"
                   :filterable="field.options.filterable"
                   :placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
--- a/src/components/form-designer/form-widget/field-widget/checkbox-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/checkbox-widget.vue
@ -3,7 +3,7 @@
                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
    <el-checkbox-group ref="fieldEditor" v-model="fieldModel"
-                       :disabled="field.options.disabled" :size="field.options.size"
+                       :disabled="field.options.disabled" :size="widgetSize"
                       @change="handleChangeEvent">
      <template v-if="!!field.options.buttonStyle">
        <el-checkbox-button v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value"
--- a/src/components/form-designer/form-widget/field-widget/color-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/color-widget.vue
@ -3,7 +3,7 @@
                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
    <el-color-picker ref="fieldEditor" v-model="fieldModel"
-                     :size="field.options.size"
+                     :size="widgetSize"
                     :disabled="field.options.disabled"
                     @change="handleChangeEvent">
    </el-color-picker>
--- a/src/components/form-designer/form-widget/field-widget/date-range-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/date-range-widget.vue
@ -5,7 +5,7 @@
    <div :class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']">
      <el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel"
                      :disabled="field.options.disabled" :readonly="field.options.readonly"
-                      :size="field.options.size"
+                      :size="widgetSize"
                      :clearable="field.options.clearable" :editable="field.options.editable"
                      :format="field.options.format" :value-format="field.options.valueFormat"
                      :start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startDatePlaceholder')"
--- a/src/components/form-designer/form-widget/field-widget/date-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/date-widget.vue
@ -5,7 +5,7 @@
    <el-date-picker ref="fieldEditor" :type="field.options.type" v-model="fieldModel"
                    :class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']"
                    :readonly="field.options.readonly" :disabled="field.options.disabled"
-                    :size="field.options.size"
+                    :size="widgetSize"
                    :clearable="field.options.clearable" :editable="field.options.editable"
                    :format="field.options.format" :value-format="field.options.valueFormat"
                    :placeholder="field.options.placeholder || i18nt('render.hint.datePlaceholder')"
--- a/src/components/form-designer/form-widget/field-widget/fieldMixin.js
+++ b/src/components/form-designer/form-widget/field-widget/fieldMixin.js
@ -312,7 +312,6 @@ export default {
      //eventBus.$emit('field-value-changed', [newValue, oldValue])  //此处应该加事件触发组件判断，非本组件（其他组件）触发的事件应该跳过，否则会出现事件无限循环！！

      this.emit$('field-value-changed', [newValue, oldValue])
-      console.log('test', 'ccccccccc')

      // /* 必须用dispatch向指定父组件派发消息！！ */
      this.dispatch('VFormRender', 'fieldChange',
@ -377,9 +376,6 @@ export default {
    },

    handleOnChange(val, oldVal) {  //自定义onChange事件
-      console.log('test', 'aaaaaaaaa')
-      //debugger
-
      if (!!this.field.options.onChange) {
        let changeFn = new Function('value', 'oldValue', this.field.options.onChange)
        changeFn.call(this, val, oldVal)
--- a/src/components/form-designer/form-widget/field-widget/input-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/input-widget.vue
@ -4,7 +4,7 @@
                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
    <el-input ref="fieldEditor" v-model="fieldModel"
              :disabled="field.options.disabled" :readonly="field.options.readonly"
-              :size="field.options.size" class="hide-spin-button"
+              :size="widgetSize" class="hide-spin-button"
              :type="inputType"
              :show-password="field.options.showPassword"
              :placeholder="field.options.placeholder"
--- a/src/components/form-designer/form-widget/field-widget/radio-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/radio-widget.vue
@ -3,7 +3,7 @@
                     :parent-widget="parentWidget" :parent-list="parentList" :index-of-parent-list="indexOfParentList"
                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
    <el-radio-group ref="fieldEditor" v-model="fieldModel"
-                    :disabled="field.options.disabled" :size="field.options.size"
+                    :disabled="field.options.disabled" :size="widgetSize"
                    @change="handleChangeEvent">
      <template v-if="!!field.options.buttonStyle">
        <el-radio-button v-for="(item, index) in field.options.optionItems" :key="index" :label="item.value"
--- a/src/components/form-designer/form-widget/field-widget/select-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/select-widget.vue
@ -4,7 +4,7 @@
                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
    <el-select ref="fieldEditor" v-model="fieldModel" class="full-width-input"
               :disabled="field.options.disabled"
-               :size="field.options.size"
+               :size="widgetSize"
               :clearable="field.options.clearable"
               :filterable="field.options.filterable"
               :allow-create="field.options.allowCreate"
--- a/src/components/form-designer/form-widget/field-widget/textarea-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/textarea-widget.vue
@ -4,7 +4,7 @@
                     :sub-form-row-index="subFormRowIndex" :sub-form-col-index="subFormColIndex" :sub-form-row-id="subFormRowId">
    <el-input type="textarea" ref="fieldEditor" v-model="fieldModel"
              :disabled="field.options.disabled" :readonly="field.options.readonly"
-              :size="field.options.size"
+              :size="widgetSize"
              :placeholder="field.options.placeholder" :rows="field.options.rows"
              :minlength="field.options.minLength" :maxlength="field.options.maxLength"
              :show-word-limit="field.options.showWordLimit"
--- a/src/components/form-designer/form-widget/field-widget/time-range-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/time-range-widget.vue
@ -6,7 +6,7 @@
      <el-time-picker ref="fieldEditor" is-range v-model="fieldModel"
                      :class="[!!field.options.autoFullWidth ? 'full-width-input' : '']"
                      :disabled="field.options.disabled" :readonly="field.options.readonly"
-                      :size="field.options.size"
+                      :size="widgetSize"
                      :clearable="field.options.clearable" :editable="field.options.editable"
                      :format="field.options.format" value-format="HH:mm:ss"
                      :start-placeholder="field.options.startPlaceholder || i18nt('render.hint.startTimePlaceholder')"
--- a/src/components/form-designer/form-widget/field-widget/time-widget.vue
+++ b/src/components/form-designer/form-widget/field-widget/time-widget.vue
@ -5,7 +5,7 @@
    <el-time-picker ref="fieldEditor" v-model="fieldModel"
                    :class="[!!field.options.autoFullWidth ? 'auto-full-width' : '']"
                    :disabled="field.options.disabled" :readonly="field.options.readonly"
-                    :size="field.options.size"
+                    :size="widgetSize"
                    :clearable="field.options.clearable" :editable="field.options.editable"
                    :format="field.options.format" value-format="HH:mm:ss"
                    :placeholder="field.options.placeholder || i18nt('render.hint.timePlaceholder')"
--- a/src/components/form-designer/setting-panel/property-editor-factory.jsx
+++ b/src/components/form-designer/setting-panel/property-editor-factory.jsx
@ -49,7 +49,7 @@ export const createBooleanEditor = function (propName, propLabelKey) {
    render(h) {
      return (
        <el-form-item label={translate(propLabelKey)}>
-          <el-checkbox v-model={this.optionModel[propName]} />
+          <el-switch v-model={this.optionModel[propName]} />
        </el-form-item>
      )
    }
--- a/src/components/form-designer/setting-panel/property-editor/allowCreate-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/allowCreate-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.allowCreate')">
-    <el-checkbox v-model="optionModel.allowCreate"></el-checkbox>
+    <el-switch v-model="optionModel.allowCreate"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/appendButton-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/appendButton-editor.vue
@ -4,7 +4,7 @@
      <el-divider class="custom-divider">{{i18nt('designer.setting.inputButton')}}</el-divider>
    </el-form-item>
    <el-form-item :label="i18nt('designer.setting.appendButton')">
-      <el-checkbox v-model="optionModel.appendButton"></el-checkbox>
+      <el-switch v-model="optionModel.appendButton"></el-switch>
    </el-form-item>
  </div>
 </template>
--- a/src/components/form-designer/setting-panel/property-editor/appendButtonDisabled-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/appendButtonDisabled-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.appendButtonDisabled')">
-    <el-checkbox v-model="optionModel.appendButtonDisabled"></el-checkbox>
+    <el-switch v-model="optionModel.appendButtonDisabled"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/autoFullWidth-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/autoFullWidth-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.autoFullWidth')">
-    <el-checkbox v-model="optionModel.autoFullWidth"></el-checkbox>
+    <el-switch v-model="optionModel.autoFullWidth"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/automaticDropdown-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/automaticDropdown-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.automaticDropdown')">
-    <el-checkbox v-model="optionModel.automaticDropdown"></el-checkbox>
+    <el-switch v-model="optionModel.automaticDropdown"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/border-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/border-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.border')">
-    <el-checkbox v-model="optionModel.border"></el-checkbox>
+    <el-switch v-model="optionModel.border"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/buttonStyle-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/buttonStyle-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.buttonStyle')">
-    <el-checkbox v-model="optionModel.buttonStyle"></el-checkbox>
+    <el-switch v-model="optionModel.buttonStyle"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/clearable-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/clearable-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.clearable')">
-    <el-checkbox v-model="optionModel.clearable"></el-checkbox>
+    <el-switch v-model="optionModel.clearable"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-responsive-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/container-grid-col/grid-col-responsive-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.responsive')">
-    <el-checkbox v-model="optionModel.responsive"></el-checkbox>
+    <el-switch v-model="optionModel.responsive"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/container-sub-form/showBlankRow-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/container-sub-form/showBlankRow-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.showBlankRow')">
-    <el-checkbox v-model="optionModel.showBlankRow"></el-checkbox>
+    <el-switch v-model="optionModel.showBlankRow"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/container-sub-form/showRowNumber-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/container-sub-form/showRowNumber-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.showRowNumber')">
-    <el-checkbox v-model="optionModel.showRowNumber"></el-checkbox>
+    <el-switch v-model="optionModel.showRowNumber"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/disabled-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/disabled-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.disabled')">
-    <el-checkbox v-model="optionModel.disabled"></el-checkbox>
+    <el-switch v-model="optionModel.disabled"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/editable-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/editable-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.editable')">
-    <el-checkbox v-model="optionModel.editable"></el-checkbox>
+    <el-switch v-model="optionModel.editable"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/field-button/circle-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-button/circle-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.circle')">
-    <el-checkbox v-model="optionModel.circle"></el-checkbox>
+    <el-switch v-model="optionModel.circle"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/field-button/plain-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-button/plain-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.plain')">
-    <el-checkbox v-model="optionModel.plain"></el-checkbox>
+    <el-switch v-model="optionModel.plain"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/field-button/round-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-button/round-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.round')">
-    <el-checkbox v-model="optionModel.round"></el-checkbox>
+    <el-switch v-model="optionModel.round"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/field-rate/allowHalf-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-rate/allowHalf-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.allowHalf')">
-    <el-checkbox v-model="optionModel.allowHalf"></el-checkbox>
+    <el-switch v-model="optionModel.allowHalf"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/field-rate/showScore-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-rate/showScore-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.showScore')">
-    <el-checkbox v-model="optionModel.showScore"></el-checkbox>
+    <el-switch v-model="optionModel.showScore"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/field-rate/showText-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-rate/showText-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.showText')">
-    <el-checkbox v-model="optionModel.showText"></el-checkbox>
+    <el-switch v-model="optionModel.showText"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/field-slider/range-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-slider/range-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.range')">
-    <el-checkbox v-model="optionModel.range"></el-checkbox>
+    <el-switch v-model="optionModel.range"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/field-slider/showStops-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-slider/showStops-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.showStops')">
-    <el-checkbox v-model="optionModel.showStops"></el-checkbox>
+    <el-switch v-model="optionModel.showStops"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/field-slider/vertical-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/field-slider/vertical-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.vertical')">
-    <el-checkbox v-model="optionModel.vertical"></el-checkbox>
+    <el-switch v-model="optionModel.vertical"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/filterable-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/filterable-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.filterable')">
-    <el-checkbox v-model="optionModel.filterable"></el-checkbox>
+    <el-switch v-model="optionModel.filterable"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/hidden-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/hidden-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.hidden')">
-    <el-checkbox v-model="optionModel.hidden"></el-checkbox>
+    <el-switch v-model="optionModel.hidden"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/labelHidden-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/labelHidden-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.labelHidden')">
-    <el-checkbox v-model="optionModel.labelHidden"></el-checkbox>
+    <el-switch v-model="optionModel.labelHidden"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/multiple-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/multiple-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.multiple')">
-    <el-checkbox v-model="optionModel.multiple" @change="onMultipleSelected"></el-checkbox>
+    <el-switch v-model="optionModel.multiple" @change="onMultipleSelected"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/multipleSelect-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/multipleSelect-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.multipleSelect')">
-    <el-checkbox v-model="optionModel.multipleSelect"></el-checkbox>
+    <el-switch v-model="optionModel.multipleSelect"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/readonly-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/readonly-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.readonly')">
-    <el-checkbox v-model="optionModel.readonly"></el-checkbox>
+    <el-switch v-model="optionModel.readonly"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/remote-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/remote-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.remote')">
-    <el-checkbox v-model="optionModel.remote" @change="onRemoteChange"></el-checkbox>
+    <el-switch v-model="optionModel.remote" @change="onRemoteChange"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/required-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/required-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.required')">
-    <el-checkbox v-model="optionModel.required"></el-checkbox>
+    <el-switch v-model="optionModel.required"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/showFileList-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/showFileList-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.showFileList')">
-    <el-checkbox v-model="optionModel.showFileList"></el-checkbox>
+    <el-switch v-model="optionModel.showFileList"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/showPassword-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/showPassword-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.showPassword')" v-if="optionModel.type === 'password'">
-    <el-checkbox v-model="optionModel.showPassword"></el-checkbox>
+    <el-switch v-model="optionModel.showPassword"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/showWordLimit-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/showWordLimit-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.showWordLimit')">
-    <el-checkbox v-model="optionModel.showWordLimit"></el-checkbox>
+    <el-switch v-model="optionModel.showWordLimit"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/setting-panel/property-editor/withCredentials-editor.vue
+++ b/src/components/form-designer/setting-panel/property-editor/withCredentials-editor.vue
@ -1,6 +1,6 @@
 <template>
  <el-form-item :label="i18nt('designer.setting.withCredentials')">
-    <el-checkbox v-model="optionModel.withCredentials"></el-checkbox>
+    <el-switch v-model="optionModel.withCredentials"></el-switch>
  </el-form-item>
 </template>

--- a/src/components/form-designer/toolbar-panel/index.vue
+++ b/src/components/form-designer/toolbar-panel/index.vue
@ -647,11 +647,15 @@
  }

  .left-toolbar {
+    display: flex;
+    margin-top: 4px;
    float: left;
    font-size: 16px;
  }

  .right-toolbar {
+    display: flex;
+    margin-top: 5px;
    float: right;

    :deep(.el-button--text) {
--- a/src/utils/code-generator.js
+++ b/src/utils/code-generator.js
@ -8,8 +8,8 @@ export const generateCode = function(formJson, codeType= 'vue') {
 	<meta charset="UTF-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
 	<title>VForm Demo</title>
-	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
-	<link rel="stylesheet" href="https://ks3-cn-beijing.ksyun.com/vform2021/VFormRender.css?t=20210720">
+	<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
+	<link rel="stylesheet" href="https://ks3-cn-beijing.ksyun.com/vform3/render.style.css?t=20220129">
 	<style type="text/css">
 	</style>
 </head>
@ -21,24 +21,18 @@ export const generateCode = function(formJson, codeType= 'vue') {
 	  <el-button type="primary" @click="submitForm">Submit</el-button>
  </div>

-<script type="text/javascript">
-  if (!!window.ActiveXObject || "ActiveXObject" in window) { //IE load polyfill.js for Promise
-    var scriptEle = document.createElement("script");
-    scriptEle.type = "text/javascript";
-    scriptEle.src = "https://cdn.bootcss.com/babel-polyfill/6.23.0/polyfill.min.js"
-    document.body.appendChild(scriptEle)
-  }
-</script>
-<script src="https://unpkg.com/vue/dist/vue.js"></script>
-<script src="https://unpkg.com/element-ui/lib/index.js"></script>
-<script src="https://ks3-cn-beijing.ksyun.com/vform2021/VFormRender.umd.min.js?t=20210720"></script>
+<script src="//unpkg.com/vue@next"></script>
+<script src="//unpkg.com/element-plus"></script>
+<script src="https://ks3-cn-beijing.ksyun.com/vform3/render.umd.js?t=20220129"></script>
 <script>
-	new Vue({
-      el: '#app',
-      data: {
+  const { createApp } = Vue;
+	const app = createApp({
+      data() {
+        return {
          formJson: ${formJsonStr},
          formData: {},
          optionData: {}
+        }
      },
      methods: {
        submitForm: function() {
@ -52,6 +46,9 @@ export const generateCode = function(formJson, codeType= 'vue') {
        }
      }
 	});
+	app.use(ElementPlus)
+	app.use(VFormRender)
+	app.mount("#app");
 </script>
 </body>
 </html>`
@ -64,27 +61,25 @@ export const generateCode = function(formJson, codeType= 'vue') {
    <el-button type="primary" @click="submitForm">Submit</el-button>
  </div>
 </template>
-<script>
-  export default {
-    data() {
-      return {
-        formJson: ${formJsonStr},
-        formData: {},
-        optionData: {}
-      }
-    },
-    methods: {
-      submitForm() {
-        this.$refs.vFormRef.getFormData().then(formData => {
+
+<script setup>
+  import { ref, reactive } from 'vue'
+  import { ElMessage } from 'element-plus'
+
+  const formJson = reactive(${formJsonStr})
+  const formData = reactive({})
+  const optionData = reactive({})
+  const vFormRef = ref(null)
+
+  const submitForm = () => {
+    vFormRef.value.getFormData().then(formData => {
      // Form Validation OK
      alert( JSON.stringify(formData) )
    }).catch(error => {
      // Form Validation failed
-          this.$message.error(error)
+      ElMessage.error(error)
    })
  }
-    }
-  }
 </script>`

  }
--- a/vite-lib-render.config.js
+++ b/vite-lib-render.config.js
@ -14,7 +14,8 @@ export default defineConfig({
    vueJsx({}),

    //解决引入commonjs模块后打包出现的{'default' is not exported by XXX}错误!!
-    commonjs(),
+    commonjs({requireReturnsDefault: true}),  /* 配置requireReturnsDefault属性，
+    解决打包后引入VForm出现的"Axios is not a constructor"错！！ */

    viteSvgIcons({
      // Specify the icon folder to be cached
@ -50,7 +51,7 @@ export default defineConfig({
    lib: {
      entry: resolve(__dirname, 'install-render.js'),
      name: 'VFormRender',
-      fileName: (format) => `VFormRender.${format}.js`
+      fileName: (format) => `render.${format}.js`
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖
--- a/vite-lib.config.js
+++ b/vite-lib.config.js
@ -55,7 +55,7 @@ export default defineConfig({
    lib: {
      entry: resolve(__dirname, 'install.js'),
      name: 'VFormDesigner',
-      fileName: (format) => `VFormDesigner.${format}.js`
+      fileName: (format) => `designer.${format}.js`
    },
    rollupOptions: {
      // 确保外部化处理那些你不想打包进库的依赖