From eeb0065d803ec90bfb26769fd34e5b428b52109f Mon Sep 17 00:00:00 2001
From: vdpAdmin <vdpadmin@163.com>
Date: Sat, 29 Jan 2022 19:49:51 +0800
Subject: [PATCH] =?UTF-8?q?2022.01.29=EF=BC=8C=E4=BF=AE=E5=A4=8D=E9=83=A8?=
 =?UTF-8?q?=E5=88=86bug=EF=BC=8C=E5=87=86=E5=A4=87=E5=8F=91=E5=B8=833.0?=
 =?UTF-8?q?=E6=AD=A3=E5=BC=8F=E7=89=88=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 install-render.js                             |  7 +-
 install.js                                    |  7 +-
 package.json                                  |  2 +-
 .../field-widget/button-widget.vue            |  2 +-
 .../field-widget/cascader-widget.vue          |  2 +-
 .../field-widget/checkbox-widget.vue          |  2 +-
 .../form-widget/field-widget/color-widget.vue |  2 +-
 .../field-widget/date-range-widget.vue        |  2 +-
 .../form-widget/field-widget/date-widget.vue  |  2 +-
 .../form-widget/field-widget/fieldMixin.js    |  4 -
 .../form-widget/field-widget/input-widget.vue |  2 +-
 .../form-widget/field-widget/radio-widget.vue |  2 +-
 .../field-widget/select-widget.vue            |  2 +-
 .../field-widget/textarea-widget.vue          |  2 +-
 .../field-widget/time-range-widget.vue        |  2 +-
 .../form-widget/field-widget/time-widget.vue  |  2 +-
 .../setting-panel/property-editor-factory.jsx |  2 +-
 .../property-editor/allowCreate-editor.vue    |  2 +-
 .../property-editor/appendButton-editor.vue   |  2 +-
 .../appendButtonDisabled-editor.vue           |  2 +-
 .../property-editor/autoFullWidth-editor.vue  |  2 +-
 .../automaticDropdown-editor.vue              |  2 +-
 .../property-editor/border-editor.vue         |  2 +-
 .../property-editor/buttonStyle-editor.vue    |  2 +-
 .../property-editor/clearable-editor.vue      |  2 +-
 .../grid-col-responsive-editor.vue            |  2 +-
 .../showBlankRow-editor.vue                   |  2 +-
 .../showRowNumber-editor.vue                  |  2 +-
 .../property-editor/disabled-editor.vue       |  2 +-
 .../property-editor/editable-editor.vue       |  2 +-
 .../field-button/circle-editor.vue            |  2 +-
 .../field-button/plain-editor.vue             |  2 +-
 .../field-button/round-editor.vue             |  2 +-
 .../field-rate/allowHalf-editor.vue           |  2 +-
 .../field-rate/showScore-editor.vue           |  2 +-
 .../field-rate/showText-editor.vue            |  2 +-
 .../field-slider/range-editor.vue             |  2 +-
 .../field-slider/showStops-editor.vue         |  2 +-
 .../field-slider/vertical-editor.vue          |  2 +-
 .../property-editor/filterable-editor.vue     |  2 +-
 .../property-editor/hidden-editor.vue         |  2 +-
 .../property-editor/labelHidden-editor.vue    |  2 +-
 .../property-editor/multiple-editor.vue       |  2 +-
 .../property-editor/multipleSelect-editor.vue |  2 +-
 .../property-editor/readonly-editor.vue       |  2 +-
 .../property-editor/remote-editor.vue         |  2 +-
 .../property-editor/required-editor.vue       |  2 +-
 .../property-editor/showFileList-editor.vue   |  2 +-
 .../property-editor/showPassword-editor.vue   |  2 +-
 .../property-editor/showWordLimit-editor.vue  |  2 +-
 .../withCredentials-editor.vue                |  2 +-
 .../form-designer/toolbar-panel/index.vue     |  4 +
 src/utils/code-generator.js                   | 73 +++++++++----------
 vite-lib-render.config.js                     |  5 +-
 vite-lib.config.js                            |  2 +-
 55 files changed, 96 insertions(+), 102 deletions(-)

diff --git a/install-render.js b/install-render.js
index 563eab6..3b3de8d 100644
--- 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,
diff --git a/install.js b/install.js
index 1e09ad9..3252f12 100644
--- 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,
diff --git a/package.json b/package.json
index f8d6553..3da2efc 100644
--- 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",
diff --git a/src/components/form-designer/form-widget/field-widget/button-widget.vue b/src/components/form-designer/form-widget/field-widget/button-widget.vue
index edbfdcb..21a1f61 100644
--- 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"
diff --git a/src/components/form-designer/form-widget/field-widget/cascader-widget.vue b/src/components/form-designer/form-widget/field-widget/cascader-widget.vue
index e2df554..8a0830c 100644
--- 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')"
diff --git a/src/components/form-designer/form-widget/field-widget/checkbox-widget.vue b/src/components/form-designer/form-widget/field-widget/checkbox-widget.vue
index e8b1a50..351c6dc 100644
--- 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"
diff --git a/src/components/form-designer/form-widget/field-widget/color-widget.vue b/src/components/form-designer/form-widget/field-widget/color-widget.vue
index d0b30e8..75cf669 100644
--- 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>
diff --git 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
index d8e759c..64bbd7d 100644
--- 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')"
diff --git a/src/components/form-designer/form-widget/field-widget/date-widget.vue b/src/components/form-designer/form-widget/field-widget/date-widget.vue
index 52483e5..13db9bd 100644
--- 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')"
diff --git a/src/components/form-designer/form-widget/field-widget/fieldMixin.js b/src/components/form-designer/form-widget/field-widget/fieldMixin.js
index caa6649..4aff73e 100644
--- 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)
diff --git a/src/components/form-designer/form-widget/field-widget/input-widget.vue b/src/components/form-designer/form-widget/field-widget/input-widget.vue
index bbd5741..04f29da 100644
--- 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"
diff --git a/src/components/form-designer/form-widget/field-widget/radio-widget.vue b/src/components/form-designer/form-widget/field-widget/radio-widget.vue
index 9b95acf..4d6dd48 100644
--- 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"
diff --git a/src/components/form-designer/form-widget/field-widget/select-widget.vue b/src/components/form-designer/form-widget/field-widget/select-widget.vue
index 16cbf9c..215ff00 100644
--- 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"
diff --git a/src/components/form-designer/form-widget/field-widget/textarea-widget.vue b/src/components/form-designer/form-widget/field-widget/textarea-widget.vue
index be4d5f3..15b677c 100644
--- 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"
diff --git 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
index e08d3c1..df77a7a 100644
--- 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')"
diff --git a/src/components/form-designer/form-widget/field-widget/time-widget.vue b/src/components/form-designer/form-widget/field-widget/time-widget.vue
index 58012e8..723c5f3 100644
--- 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')"
diff --git a/src/components/form-designer/setting-panel/property-editor-factory.jsx b/src/components/form-designer/setting-panel/property-editor-factory.jsx
index 632494c..8838555 100644
--- 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>
       )
     }
diff --git a/src/components/form-designer/setting-panel/property-editor/allowCreate-editor.vue b/src/components/form-designer/setting-panel/property-editor/allowCreate-editor.vue
index add2090..299fcb2 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/appendButton-editor.vue b/src/components/form-designer/setting-panel/property-editor/appendButton-editor.vue
index d844945..aa9d15e 100644
--- 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>
diff --git a/src/components/form-designer/setting-panel/property-editor/appendButtonDisabled-editor.vue b/src/components/form-designer/setting-panel/property-editor/appendButtonDisabled-editor.vue
index b76e318..dd5c4f0 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/autoFullWidth-editor.vue b/src/components/form-designer/setting-panel/property-editor/autoFullWidth-editor.vue
index ab297d0..50019b9 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/automaticDropdown-editor.vue b/src/components/form-designer/setting-panel/property-editor/automaticDropdown-editor.vue
index cb8d7c6..b5d5b40 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/border-editor.vue b/src/components/form-designer/setting-panel/property-editor/border-editor.vue
index 4f77bec..8f76f15 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/buttonStyle-editor.vue b/src/components/form-designer/setting-panel/property-editor/buttonStyle-editor.vue
index cc635df..060c0df 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/clearable-editor.vue b/src/components/form-designer/setting-panel/property-editor/clearable-editor.vue
index 4f79ff0..bae7dc0 100644
--- 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>
 
diff --git 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
index ad9076e..820802c 100644
--- 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>
 
diff --git 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
index 32dabd0..629cdae 100644
--- 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>
 
diff --git 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
index c69b365..3395796 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/disabled-editor.vue b/src/components/form-designer/setting-panel/property-editor/disabled-editor.vue
index a25eaca..baba3a0 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/editable-editor.vue b/src/components/form-designer/setting-panel/property-editor/editable-editor.vue
index 3f734c5..105aa51 100644
--- 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>
 
diff --git 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
index 88522d5..a5c0f6a 100644
--- 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>
 
diff --git 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
index ed25895..f825841 100644
--- 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>
 
diff --git 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
index 8bde2a1..33c5612 100644
--- 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>
 
diff --git 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
index fd80e44..929a36c 100644
--- 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>
 
diff --git 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
index 6be1b18..f929132 100644
--- 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>
 
diff --git 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
index 76fa1a8..85625d5 100644
--- 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>
 
diff --git 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
index 3a431b5..7b1ef04 100644
--- 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>
 
diff --git 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
index e6a4edd..ae79fe8 100644
--- 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>
 
diff --git 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
index e5f0a19..42cb5e3 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/filterable-editor.vue b/src/components/form-designer/setting-panel/property-editor/filterable-editor.vue
index b0f9b58..3c72077 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/hidden-editor.vue b/src/components/form-designer/setting-panel/property-editor/hidden-editor.vue
index 53eb456..a954304 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/labelHidden-editor.vue b/src/components/form-designer/setting-panel/property-editor/labelHidden-editor.vue
index 5225a1b..e512ab4 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/multiple-editor.vue b/src/components/form-designer/setting-panel/property-editor/multiple-editor.vue
index 48fde31..487e4ad 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/multipleSelect-editor.vue b/src/components/form-designer/setting-panel/property-editor/multipleSelect-editor.vue
index 0d2b7fc..8303980 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/readonly-editor.vue b/src/components/form-designer/setting-panel/property-editor/readonly-editor.vue
index 7ff8bfd..b13462e 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/remote-editor.vue b/src/components/form-designer/setting-panel/property-editor/remote-editor.vue
index 2cf2582..def1ff2 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/required-editor.vue b/src/components/form-designer/setting-panel/property-editor/required-editor.vue
index 6684f39..6925b12 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/showFileList-editor.vue b/src/components/form-designer/setting-panel/property-editor/showFileList-editor.vue
index 597e1da..04e2def 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/showPassword-editor.vue b/src/components/form-designer/setting-panel/property-editor/showPassword-editor.vue
index 38c722f..902818d 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/showWordLimit-editor.vue b/src/components/form-designer/setting-panel/property-editor/showWordLimit-editor.vue
index 478f349..07fab83 100644
--- 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>
 
diff --git a/src/components/form-designer/setting-panel/property-editor/withCredentials-editor.vue b/src/components/form-designer/setting-panel/property-editor/withCredentials-editor.vue
index 39b35eb..b965627 100644
--- 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>
 
diff --git a/src/components/form-designer/toolbar-panel/index.vue b/src/components/form-designer/toolbar-panel/index.vue
index c723c2f..626b457 100644
--- 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) {
diff --git a/src/utils/code-generator.js b/src/utils/code-generator.js
index 47aeed8..a7d8755 100644
--- 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: {
-        formJson: ${formJsonStr},
-        formData: {},
-        optionData: {}
+  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,26 +61,24 @@ 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 => {
-          // Form Validation OK
-          alert( JSON.stringify(formData) )
-        }).catch(error => {
-          // Form Validation failed
-          this.$message.error(error)
-        })
-      }
-    }
+
+<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
+      ElMessage.error(error)
+    })
   }
 </script>`
 
diff --git a/vite-lib-render.config.js b/vite-lib-render.config.js
index ba2f137..3575093 100644
--- 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: {
       // 确保外部化处理那些你不想打包进库的依赖
diff --git a/vite-lib.config.js b/vite-lib.config.js
index 291cf8b..c47dd12 100644
--- 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: {
       // 确保外部化处理那些你不想打包进库的依赖