2023..03.31更新：

1. 静态文本组件增加两个属性；
2. 表格单元格增加换行属性；
3. 修复下拉组件筛选后不能显示全部选项的bug。

README.md

@@ -8,8 +8,11 @@
 ### 立即体验VForm 3
 [在线Demo](http://120.92.142.115:81/vform3/)
  
- ### 立即体验VForm 3 Pro高级版（提供商业支持）
+### 立即体验VForm 3 Pro高级版（提供商业支持）
- [VForm 3 Pro Demo](https://vform666.com/pages/pro/)
+[VForm 3 Pro Demo](https://vform666.com/pages/pro/)
+
+### 视频教程集合：
+[B站观看](https://space.bilibili.com/626932375)
  
 ### 适合Vue 2的版本看这里
 [点此查看](https://gitee.com/vdpadmin/variant-form)

src/components/form-designer/form-widget/container-widget/table-cell-widget.vue

@@ -1,6 +1,6 @@
 <template>
   <td class="table-cell" :class="[selected ? 'selected' : '', customClass]"
-      :style="{width: widget.options.cellWidth + '!important' || '', height: widget.options.cellHeight + '!important' || ''}"
+      :style="{width: widget.options.cellWidth + '!important' || '', height: widget.options.cellHeight + '!important' || '', 'word-break': !!widget.options.wordBreak ? 'break-all' : 'normal'}"
       :colspan="widget.options.colspan || 1" :rowspan="widget.options.rowspan || 1"
       @click.stop="selectWidget(widget)">
     <draggable :list="widget.widgetList" item-key="id" v-bind="{group:'dragGroup', ghostClass: 'ghost',animation: 200}"

src/components/form-designer/form-widget/field-widget/select-widget.vue

@@ -12,7 +12,7 @@
                :automatic-dropdown="field.options.automaticDropdown"
                :multiple="field.options.multiple" :multiple-limit="field.options.multipleLimit"
                :placeholder="field.options.placeholder || i18nt('render.hint.selectPlaceholder')"
-               :remote="field.options.remote" :remote-method="remoteQuery"
+               :remote="field.options.remote" :remote-method="remoteMethod"
                @focus="handleFocusCustomEvent" @blur="handleBlurCustomEvent"
                @change="handleChangeEvent">
       <el-option v-for="item in field.options.optionItems" :key="item.value" :label="item.label"
@@ -73,6 +73,14 @@
         return (!!this.field.options.filterable && !!this.field.options.allowCreate)
       },
 
+      remoteMethod() {
+        if (!!this.field.options.remote && !!this.field.options.onRemoteQuery) {
+          return this.remoteQuery
+        } else {
+          return undefined
+        }
+      },
+
     },
     beforeCreate() {
       /* 这里不能访问方法和属性！！ */

src/components/form-designer/form-widget/field-widget/static-text-widget.vue

@@ -2,7 +2,8 @@
   <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">
-    <div ref="fieldEditor">{{field.options.textContent}}</div>
+    <div ref="fieldEditor" :style="!!field.options.fontSize ? `font-size: ${field.options.fontSize};`: ''">
+      <pre :style="{'white-space': !!field.options.preWrap ? 'pre-wrap' : 'pre', 'text-align': !!field.options.textAlign ? field.options.textAlign : 'left'}">{{field.options.textContent}}</pre></div>
   </static-content-wrapper>
 </template>
 

src/components/form-designer/setting-panel/property-editor/container-table-cell/wordBreak-editor.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.wordBreak')">
+    <el-switch v-model="optionModel.wordBreak"></el-switch>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "table-cell-wordBreak-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/form-designer/setting-panel/property-editor/field-static-text/fontSize-editor.vue

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

src/components/form-designer/setting-panel/property-editor/field-static-text/preWrap-editor.vue

@@ -0,0 +1,23 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.preWrap')">
+    <el-switch v-model="optionModel.preWrap"></el-switch>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "static-text-preWrap-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/form-designer/setting-panel/property-editor/field-static-text/textContent-editor.vue

@@ -1,6 +1,6 @@
 <template>
   <el-form-item :label="i18nt('designer.setting.textContent')">
-    <el-input v-model="optionModel.textContent"></el-input>
+    <el-input v-model="optionModel.textContent" type="textarea" :rows="3"></el-input>
   </el-form-item>
 </template>
 

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

@@ -0,0 +1,35 @@
+<template>
+  <el-form-item :label="i18nt('designer.setting.textAlign')" v-if="(selectedWidget.type === 'static-text')">
+    <el-radio-group v-model="optionModel.textAlign" class="radio-group-custom">
+      <el-radio-button label="left">
+        {{i18nt('designer.setting.leftAlign')}}</el-radio-button>
+      <el-radio-button label="center">
+        {{i18nt('designer.setting.centerAlign')}}</el-radio-button>
+      <el-radio-button label="right">
+        {{i18nt('designer.setting.rightAlign')}}</el-radio-button>
+    </el-radio-group>
+  </el-form-item>
+</template>
+
+<script>
+  import i18n from "@/utils/i18n"
+
+  export default {
+    name: "textAlign-editor",
+    mixins: [i18n],
+    props: {
+      designer: Object,
+      selectedWidget: Object,
+      optionModel: Object,
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .radio-group-custom {
+    ::v-deep .el-radio-button__inner {
+      padding-left: 12px;
+      padding-right: 12px;
+    }
+  }
+</style>

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

@@ -34,6 +34,9 @@ const COMMON_PROPERTIES = {
   'editable'          :            'editable-editor',
   'showPassword'      :            'showPassword-editor',
   'textContent'       :            'textContent-editor',
+  'textAlign'         :            'textAlign-editor',
+  'fontSize'          :            'fontSize-editor',
+  'preWrap'           :            'preWrap-editor',
   'htmlContent'       :            'htmlContent-editor',
   'format'            :            'format-editor',
   'valueFormat'       :            'valueFormat-editor',
@@ -63,6 +66,7 @@ const COMMON_PROPERTIES = {
   'cellWidth'          :            'cellWidth-editor',
   'cellHeight'         :            'cellHeight-editor',
   'colHeight'          :            'colHeight-editor',
+  'wordBreak'          :            'wordBreak-editor',
   'gutter'             :            'gutter-editor',
   'responsive'         :            'responsive-editor',
   'span'               :            'span-editor',

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

@@ -73,6 +73,7 @@ export const containers = [
       cellHeight: '',
       colspan: 1,
       rowspan: 1,
+      wordBreak: false,  //是否自动换行
       customClass: '',  //自定义css类名
     }
   },
@@ -669,6 +670,9 @@ export const basicFields = [
       columnWidth: '200px',
       hidden: false,
       textContent: 'static text',
+      textAlign: 'left',
+      fontSize: '13px',
+      preWrap: false,  //是否自动换行
       //-------------------
       customClass: '',  //自定义css类名
       //-------------------

src/components/form-render/container-item/table-cell-item.vue

@@ -1,7 +1,7 @@
 <template>
   <td class="table-cell" :class="[customClass]"
       :colspan="widget.options.colspan || 1" :rowspan="widget.options.rowspan || 1"
-      :style="{width: widget.options.cellWidth + ' !important' || '', height: widget.options.cellHeight + ' !important' || ''}">
+      :style="{width: widget.options.cellWidth + ' !important' || '', height: widget.options.cellHeight + ' !important' || '', 'word-break': !!widget.options.wordBreak ? 'break-all' : 'normal'}">
     <template v-for="(subWidget, swIdx) in widget.widgetList">
       <template v-if="'container' === subWidget.category">
         <component :is="getComponentByContainer(subWidget)" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"

src/lang/en-US.js

@@ -179,6 +179,8 @@ export default {
       endPlaceholder: 'End Placeholder',
       widgetColumnWidth: 'Width',
       widgetSize: 'Size',
+      fontSize: 'Font Size',
+      textAlign: 'Text Align',
       autoFullWidth: 'Auto Full Width',
       showStops: 'Show Stops',
       displayStyle: 'Display Style',
@@ -198,6 +200,7 @@ export default {
       disabled: 'Disabled',
       hidden: 'Hidden',
       textContent: 'Text',
+      preWrap: 'Line Wrap',
       htmlContent: 'HTML',
       clearable: 'Clearable',
       editable: 'Editable',
@@ -235,6 +238,7 @@ export default {
 
       cellWidth: 'Width',
       cellHeight: 'Height',
+      wordBreak: 'Line Wrap',
       gridColHeight: 'Height Of Col(px)',
       gutter: 'Gutter(px)',
       columnSetting: 'Cols Setting',

src/lang/zh-CN.js

@@ -179,6 +179,8 @@ export default {
       endPlaceholder: '截止占位内容',
       widgetColumnWidth: '组件列宽',
       widgetSize: '组件大小',
+      fontSize: '字体大小',
+      textAlign: '文字对齐',
       autoFullWidth: '自动拉伸宽度',
       showStops: '显示间断点',
       displayStyle: '显示样式',
@@ -198,6 +200,7 @@ export default {
       disabled: '禁用',
       hidden: '隐藏',
       textContent: '静态文字',
+      preWrap: '自动换行',
       htmlContent: 'HTML',
       clearable: '可清除',
       editable: '可输入',
@@ -235,6 +238,7 @@ export default {
 
       cellWidth: '宽度',
       cellHeight: '高度',
+      wordBreak: '文字自动换行',
       gridColHeight: '栅格列统一高度(px)',
       gutter: '栅格间隔(px)',
       columnSetting: '栅格属性设置',