版本升级到2.2.3：

1. 新增必填校验自定义提示属性requiredHint；
2. 修复field-list-api属性相关的拼写错误；
3. 修复字段标签隐藏后不能选中组件的问题；
4. 字段校验属性设置后允许清空；
5. 修复其他一些bug。

README.md

@@ -1,7 +1,7 @@
 # Variant Form
 #### 一款高效的Vue低代码表单，可视化设计，一键生成源码，享受更多摸鱼时间。
 
-![image](https://vform2021.oss-cn-beijing.aliyuncs.com/vform_demo.gif?versionId=CAEQGBiBgIDst4zj4hciIDQyYTkyOGY1ZGJiODQ4YTk5ZjkxMGIwMDY0MmY2M2Ri)
+![image](https://ks3-cn-beijing.ksyuncs.com/vform-static/img/vform_demo.gif)
 
 <br/>
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "variant-form",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve --open src/main.js",

src/App.vue

@@ -1,6 +1,10 @@
 <template>
   <div id="app">
-    <VFormDesigner ref="vfDesignerRef" :designer-config="designerConfig"></VFormDesigner>
+    <VFormDesigner ref="vfDesignerRef" :designer-config="designerConfig">
+      <template #customToolButtons>
+        <el-button type="text" @click="printFormJson">测试按钮</el-button>
+      </template>
+    </VFormDesigner>
   </div>
 </template>
 
@@ -16,8 +20,14 @@ export default {
     return {
       designerConfig: {
         resetFormJson: false,
+        toolbarMaxWidth: 490,
       }
     }
+  },
+  methods: {
+    printFormJson() {
+      console.log( this.$refs.vfDesignerRef.getFormJson() )
+    }
   }
 }
 </script>

src/components/form-designer/designer.js

@@ -714,7 +714,7 @@ export function createDesigner(vueInstance) {
       let tempId = generateId()
       newWidget.id = newWidget.type.replace(/-/g, '') + tempId
       newWidget.options.name = newWidget.id
-      newWidget.options.label = newWidget.type.toLowerCase()
+      newWidget.options.label = newWidget.options.label || newWidget.type.toLowerCase()
 
       delete newWidget.displayName
       return newWidget

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

@@ -199,7 +199,7 @@ export default {
           required: true,
           //trigger: ['blur', 'change'],
           trigger: ['blur'],  /* 去掉change事件触发校验，change事件触发时formModel数据尚未更新，导致radio/checkbox必填校验出错！！ */
-          message: this.i18nt('render.hint.fieldRequired'),
+          message: this.field.options.requiredHint || this.i18nt('render.hint.fieldRequired'),
         })
       }
 

src/components/form-designer/form-widget/field-widget/form-item-wrapper.vue

@@ -104,7 +104,7 @@
 
       labelWidth() {
         if (!!this.field.options.labelHidden) {
-          return 0
+          return !!this.designState ? 5 : 0  //设计期间标签最小宽度5像素，以便于鼠标点击可选中组件！！
         }
 
         if (!!this.field.options.labelWidth) {

src/components/form-designer/index.vue

@@ -247,7 +247,7 @@
           let labelKey = this.fieldListApi.labelKey || 'label'
           let nameKey = this.fieldListApi.nameKey || 'name'
 
-          this.fieldList.splice(0, this.fileList.length)  //清空已有
+          this.fieldList.splice(0, this.fieldList.length)  //清空已有
           res.data.forEach(fieldItem => {
             this.fieldList.push({
               label: fieldItem[labelKey],

src/components/form-designer/setting-panel/property-editor/requiredHint-editor.vue

@@ -0,0 +1,24 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.requiredHint')">
+    <el-input type="text" v-model="optionModel.requiredHint"></el-input>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+  import propertyMixin from "@/components/form-designer/setting-panel/property-editor/propertyMixin"
+
+  export default {
+    name: "requiredHint-editor",
+    mixins: [i18n, propertyMixin],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/form-designer/setting-panel/property-editor/validation-editor.vue

@@ -4,7 +4,7 @@
       <el-tooltip effect="light" :content="i18nt('designer.setting.validationHelp')">
         <i class="el-icon-info"></i></el-tooltip>
     </span>
-    <el-select v-model="optionModel.validation" filterable allow-create default-first-option>
+    <el-select v-model="optionModel.validation" filterable clearable allow-create default-first-option>
       <el-option v-for="(fv, fvIdx) in fieldValidators"
                  :key="fvIdx"
                  :label="fv.label"

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

@@ -23,6 +23,7 @@ const COMMON_PROPERTIES = {
   'labelHidden'       :            'labelHidden-editor',
   'rows'              :            'rows-editor',
   'required'          :            'required-editor',
+  'requiredHint'      :            'requiredHint-editor',
   'validation'        :            'validation-editor',
   'validationHint'    :            'validationHint-editor',
   'readonly'          :            'readonly-editor',

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

@@ -66,6 +66,7 @@
         <el-button type="primary" @click="setFormDisabled">{{i18nt('designer.hint.disableForm')}}</el-button>
         <el-button type="primary" @click="setFormEnabled">{{i18nt('designer.hint.enableForm')}}</el-button>
         <el-button type="" @click="showPreviewDialogFlag = false">{{i18nt('designer.hint.closePreview')}}</el-button>
+        <el-button @click="printFormJson">PrintFormJson</el-button>
       </div>
     </el-dialog>
 
@@ -579,6 +580,15 @@
         this.$refs['preForm'].enableForm()
       },
 
+      printFormJson() {
+        let tmpFS = {
+          widgetList: deepClone(this.designer.widgetList),
+          formConfig: deepClone(this.designer.formConfig)
+        }
+
+        console.log(tmpFS)
+      },
+
       handleFormChange(fieldName, newValue, oldValue, formModel) {
         /*
         console.log('---formChange start---')

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

@@ -118,6 +118,7 @@ export const basicFields = [
       clearable: true,
       showPassword: false,
       required: false,
+      requiredHint: '',
       validation: '',
       validationHint: '',
       //-------------------
@@ -163,6 +164,7 @@ export const basicFields = [
       disabled: false,
       hidden: false,
       required: false,
+      requiredHint: '',
       validation: '',
       validationHint: '',
       //-------------------
@@ -201,6 +203,7 @@ export const basicFields = [
       disabled: false,
       hidden: false,
       required: false,
+      requiredHint: '',
       validation: '',
       validationHint: '',
       //-------------------
@@ -247,6 +250,7 @@ export const basicFields = [
         {label: 'radio 3', value: 3},
       ],
       required: false,
+      requiredHint: '',
       validation: '',
       validationHint: '',
       //-------------------
@@ -286,6 +290,7 @@ export const basicFields = [
         {label: 'check 3', value: 3},
       ],
       required: false,
+      requiredHint: '',
       validation: '',
       validationHint: '',
       //-------------------
@@ -330,6 +335,7 @@ export const basicFields = [
         {label: 'select 3', value: 3},
       ],
       required: false,
+      requiredHint: '',
       validation: '',
       validationHint: '',
       //-------------------
@@ -369,6 +375,7 @@ export const basicFields = [
       editable: false,
       format: 'HH:mm:ss',  //时间格式
       required: false,
+      requiredHint: '',
       validation: '',
       validationHint: '',
       //-------------------
@@ -408,6 +415,7 @@ export const basicFields = [
       editable: false,
       format: 'HH:mm:ss',  //时间格式
       required: false,
+      requiredHint: '',
       validation: '',
       validationHint: '',
       //-------------------
@@ -448,6 +456,7 @@ export const basicFields = [
       format: 'yyyy-MM-dd',  //日期显示格式
       valueFormat: 'yyyy-MM-dd',  //日期对象格式
       required: false,
+      requiredHint: '',
       validation: '',
       validationHint: '',
       //-------------------
@@ -489,6 +498,7 @@ export const basicFields = [
       format: 'yyyy-MM-dd',  //日期显示格式
       valueFormat: 'yyyy-MM-dd',  //日期对象格式
       required: false,
+      requiredHint: '',
       validation: '',
       validationHint: '',
       //-------------------
@@ -553,6 +563,7 @@ export const basicFields = [
       disabled: false,
       hidden: false,
       required: false,
+      requiredHint: '',
       validation: '',
       validationHint: '',
       //-------------------
@@ -590,6 +601,7 @@ export const basicFields = [
       disabled: false,
       hidden: false,
       required: false,
+      requiredHint: '',
       validation: '',
       validationHint: '',
       //-------------------
@@ -621,6 +633,7 @@ export const basicFields = [
       disabled: false,
       hidden: false,
       required: false,
+      requiredHint: '',
       validation: '',
       validationHint: '',
       //-------------------

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

@@ -1,4 +1,4 @@
-import {generateId, traverseFieldWidgetsOfContainer} from "@/utils/util";
+import { traverseFieldWidgetsOfContainer } from "@/utils/util";
 
 export default {
   computed: {

src/extension/extension-loader.js

@@ -76,7 +76,7 @@ export const loadExtension = function () {
     {label: 'info', value: 'info'},
     {label: 'error', value: 'error'},
   ]
-  PERegister.registerCPEditor('alert-type', 'alert-type-editor',
+  PERegister.registerCPEditor('type', 'alert-type-editor',
       PEFactory.createSelectEditor('type', 'extension.setting.alertType',
           {optionItems: typeOptions}))
 

src/lang/en-US.js

@@ -188,6 +188,7 @@ export default {
       rows: 'Rows',
       labelHidden: 'Hide Label',
       required: 'Required',
+      requiredHint: 'Failure Hint',
       validation: 'Validation',
       validationHelp: 'Regular expressions supported',
       validationHint: 'Validation Hint',

src/lang/zh-CN.js

@@ -189,6 +189,7 @@ export default {
       labelHidden: '隐藏字段标签',
       required: '必填字段',
       validation: '字段校验',
+      requiredHint: '必填校验提示',
       validationHelp: '支持输入正则表达式',
       validationHint: '校验失败提示',
       readonly: '只读',

src/utils/config.js

@@ -8,7 +8,7 @@ export const DESIGNER_OPTIONS = {
 
 }
 
-export const VARIANT_FORM_VERSION = '2.2.2'
+export const VARIANT_FORM_VERSION = '2.2.3'
 
 //export const MOCK_CASE_URL = 'https://www.fastmock.site/mock/2de212e0dc4b8e0885fea44ab9f2e1d0/vform/'
 export const MOCK_CASE_URL = 'https://ks3-cn-beijing.ksyuncs.com/vform-static/vcase/'