1. input组件增加onAppendButtonClick交互事件；

2. 增加组件动态添加或移除自定义样式的API方法；
3. 修复部分bug。

src/components/form-designer/form-widget/container-widget/tab-widget.vue

@@ -112,6 +112,10 @@
     .form-widget-list {
       min-height: 28px;
     }
+
+    :deep(.el-tabs__content) {
+      min-height: 28px;
+    }
   }
 
   .tab-container.selected {

src/components/form-designer/form-widget/field-widget/fieldMixin.js

@@ -364,8 +364,17 @@ export default {
     },
 
     emitAppendButtonClick() {
+      if (!!this.designState) { //设计状态不触发点击事件
+        return
+      }
+
+      if (!!this.field.options.onAppendButtonClick) {
+        let customFn = new Function(this.field.options.onAppendButtonClick)
+        customFn.call(this)
+      } else {
         /* 必须调用mixins中的dispatch方法逐级向父组件发送消息！！ */
-      this.dispatch('VFormRender', 'appendButtonClick', [this]);
+        this.dispatch('VFormRender', 'appendButtonClick', [this])
+      }
     },
 
     handleOnChange(val, oldVal) {  //自定义onChange事件
@@ -568,6 +577,46 @@ export default {
       this.customToolbar = customToolbar
     },
 
+    /**
+     * 是否子表单内嵌的组件
+     * @returns {boolean}
+     */
+    isSubFormItem() {
+      return !!this.parentWidget ? this.parentWidget.type === 'sub-form' : false
+    },
+
+    /**
+     * 动态增加自定义css样式
+     * @param className
+     */
+    addCssClass(className) {
+      if (!this.field.options.customClass) {
+        this.field.options.customClass = [className]
+      } else {
+        this.field.options.customClass.push(className)
+      }
+    },
+
+    /**
+     * 动态移除自定义css样式
+     * @param className
+     */
+    removeCssClass(className) {
+      if (!this.field.options.customClass) {
+        return
+      }
+
+      let foundIdx = -1
+      this.field.options.customClass.map((cc, idx) => {
+        if (cc === className) {
+          foundIdx = idx
+        }
+      })
+      if (foundIdx > -1) {
+        this.field.options.customClass.splice(foundIdx, 1)
+      }
+    },
+
     //--------------------- 以上为组件支持外部调用的API方法 end ------------------//
 
   }

src/components/form-designer/form-widget/field-widget/file-upload-widget.vue

@@ -22,10 +22,10 @@
         <div class="upload-file-list">
           <span class="upload-file-name" :title="file.name">{{file.name}}</span>
           <a :href="file.url" download="">
-            <span class="el-icon-download file-action" title="i18nt('render.hint.downloadFile')">
+            <span class="el-icon-download file-action" :title="i18nt('render.hint.downloadFile')">
               <svg-icon icon-class="el-download" />
             </span></a>
-          <span class="file-action" title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
+          <span class="file-action" :title="i18nt('render.hint.removeFile')" v-if="!field.options.disabled"
             @click="removeUploadFile(file.name)"><svg-icon icon-class="el-delete" /></span>
         </div>
       </template>

src/components/form-designer/index.vue

@@ -138,7 +138,7 @@
 
         docUrl: 'https://www.vform666.com/document3.html',
         gitUrl: 'https://github.com/vform666/variant-form3-vite',
-        chatUrl: 'https://www.vform666.com/chat-group.html',
+        chatUrl: 'https://www.vform666.com/pages/chat-group/',
         subScribeUrl: 'https://www.vform666.com/pages/pro/',
 
         scrollerHeight: 0,

src/components/form-designer/setting-panel/property-editor/event-handler/onAppendButtonClick-editor.vue

@@ -0,0 +1,30 @@
+<template>
+  <el-form-item label="onAppendButtonClick" label-width="150px">
+    <el-button type="info" icon="el-icon-edit" plain round @click="editEventHandler('onAppendButtonClick', eventParams)">
+      {{i18nt('designer.setting.addEventHandler')}}</el-button>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import eventMixin from "@/components/form-designer/setting-panel/property-editor/event-handler/eventMixin"
+
+  export default {
+    name: "onAppendButtonClick-editor",
+    mixins: [i18n, eventMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+    data() {
+      return {
+        eventParams: [],
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/form-designer/setting-panel/propertyRegister.js

@@ -121,6 +121,7 @@ const EVENT_PROPERTIES = {
   'onUploadError'     :            'onUploadError-editor',
   'onFileRemove'      :            'onFileRemove-editor',
   'onValidate'        :            'onValidate-editor',
+  'onAppendButtonClick':           'onAppendButtonClick-editor',
 
   //容器
   'onSubFormRowAdd'   :            'onSubFormRowAdd-editor',

src/components/form-designer/toolbar-panel/index.vue

@@ -46,12 +46,12 @@
     <div v-if="showPreviewDialogFlag" class="" v-drag="['.drag-dialog.el-dialog', '.drag-dialog .el-dialog__header']">
       <el-dialog :title="i18nt('designer.toolbar.preview')" v-model="showPreviewDialogFlag"
                  :show-close="true" :close-on-click-modal="false" :close-on-press-escape="false" center
-                 :destroy-on-close="true" custom-class="drag-dialog small-padding-dialog" width="75%"
+                 :destroy-on-close="true" :append-to-body="true" custom-class="drag-dialog small-padding-dialog" width="75%"
                  :fullscreen="(layoutType === 'H5') || (layoutType === 'Pad')">
         <div>
           <div class="form-render-wrapper" :class="[layoutType === 'H5' ? 'h5-layout' : (layoutType === 'Pad' ? 'pad-layout' : '')]">
             <VFormRender ref="preForm" :form-json="formJson" :form-data="testFormData" :preview-state="true"
-                         :option-data="testOptionData"
+                         :option-data="testOptionData"  @myEmitTest="onMyEmitTest"
                          @appendButtonClick="testOnAppendButtonClick" @buttonClick="testOnButtonClick"
                          @formChange="handleFormChange">
             </VFormRender>
@@ -667,6 +667,10 @@
         console.log('test', button)
       },
 
+      onMyEmitTest(aaa) {
+        console.log('-----', aaa)
+      },
+
       findWidgetById(wId) {
         let foundW = null
         traverseAllWidgets(this.designer.widgetList, (w) => {

src/components/form-designer/widget-panel/widgetsConfig.js

@@ -142,6 +142,7 @@ export const basicFields = [
       onFocus: '',
       onBlur: '',
       onValidate: '',
+      onAppendButtonClick: '',
     },
   },
 

src/components/form-render/container-item/containerItemMixin.js

@@ -176,6 +176,38 @@ export default {
     //   //TODO:
     // },
 
+    /**
+     * 动态增加自定义css样式
+     * @param className
+     */
+    addCssClass(className) {
+      if (!this.widget.options.customClass) {
+        this.widget.options.customClass = [className]
+      } else {
+        this.widget.options.customClass.push(className)
+      }
+    },
+
+    /**
+     * 动态移除自定义css样式
+     * @param className
+     */
+    removeCssClass(className) {
+      if (!this.widget.options.customClass) {
+        return
+      }
+
+      let foundIdx = -1
+      this.widget.options.customClass.map((cc, idx) => {
+        if (cc === className) {
+          foundIdx = idx
+        }
+      })
+      if (foundIdx > -1) {
+        this.widget.options.customClass.splice(foundIdx, 1)
+      }
+    },
+
     //--------------------- 以上为组件支持外部调用的API方法 end ------------------//
 
   },

src/components/form-render/index.vue

@@ -477,7 +477,6 @@
 
         // 通知SubForm组件：表单数据更新事件！！
         this.broadcast('ContainerItem', 'setFormData', this.formDataModel)
-
         // 通知FieldWidget组件：表单数据更新事件！！
         this.broadcast('FieldWidget', 'setFormData', this.formDataModel)
       },

src/utils/util.js

@@ -126,28 +126,28 @@ export const loadRemoteScript = function(srcPath, callback) {  /*加载远程js
   }
 }
 
-export function traverseFieldWidgets(widgetList, handler) {
+export function traverseFieldWidgets(widgetList, handler, parent = null) {
   widgetList.map(w => {
     if (w.formItemFlag) {
-      handler(w)
+      handler(w, parent)
     } else if (w.type === 'grid') {
       w.cols.map(col => {
-        traverseFieldWidgets(col.widgetList, handler)
+        traverseFieldWidgets(col.widgetList, handler, w)
       })
     } else if (w.type === 'table') {
       w.rows.map(row => {
         row.cols.map(cell => {
-          traverseFieldWidgets(cell.widgetList, handler)
+          traverseFieldWidgets(cell.widgetList, handler, w)
         })
       })
     } else if (w.type === 'tab') {
       w.tabs.map(tab => {
-        traverseFieldWidgets(tab.widgetList, handler)
+        traverseFieldWidgets(tab.widgetList, handler, w)
       })
     } else if (w.type === 'sub-form') {
-      traverseFieldWidgets(w.widgetList, handler)
+      traverseFieldWidgets(w.widgetList, handler, w)
     } else if (w.category === 'container') {  //自定义容器
-      traverseFieldWidgets(w.widgetList, handler)
+      traverseFieldWidgets(w.widgetList, handler, w)
     }
   })
 }