[feature]{component}: 表单设计器加入文本组件

BoBoooooo · Oct 24, 2019 · 615fdef · 615fdef
1 parent 0fd3b39
commit 615fdef
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 4 deletions.
diff --git a/src/components/FormDesigner/GenerateFormItem.vue b/src/components/FormDesigner/GenerateFormItem.vue
@@ -5,7 +5,7 @@
  * @Date: 2019-03-21 16:47:49
  -->
 <template>
-  <el-form-item :label="widget.name"
+  <el-form-item :label="widget.type === 'text'?'':widget.name"
                 :label-width="widget.name===''?'0px':''"
                 :prop="widget.model">
     <template v-if="widget.type == 'input'">
@@ -22,7 +22,11 @@
                 :style="{width: widget.options.width}"
                 :disabled="widget.options.disabled" />
     </template>
-
+     <template v-if="widget.type == 'text'">
+       <h4 style="text-align:center;margin:10px auto">
+        {{widget.name}}
+      </h4>
+    </template>
     <template v-if="widget.type == 'textarea'">
       <el-input :rows="5"
                 autosize

diff --git a/src/components/FormDesigner/WidgetConfig.vue b/src/components/FormDesigner/WidgetConfig.vue
@@ -524,6 +524,7 @@ import 'vue-awesome/icons/th'
 import 'vue-awesome/icons/sort-numeric-up'
 import 'vue-awesome/icons/regular/star'
 import 'vue-awesome/icons/palette'
+import 'vue-awesome/icons/language';
 import 'vue-awesome/icons/regular/caret-square-down'
 import 'vue-awesome/icons/toggle-off'
 import 'vue-awesome/icons/sliders-h'

diff --git a/src/components/FormDesigner/WidgetFormItem.vue b/src/components/FormDesigner/WidgetFormItem.vue
@@ -1,7 +1,7 @@
 <template>
   <el-form-item v-if="element && element.key"
                 :class="{active: selectWidget.key == element.key, 'is_req': element.options.required}"
-                :label="element.name"
+                :label="element.type === 'text'?'':element.name"
                 class="widget-view "
                 @click.native.stop="handleSelectWidget(index)"
                 :label-width="element.name===''?'0px':''">
@@ -15,7 +15,11 @@
                 :style="{width: element.options.width}"
                 :placeholder="element.options.placeholder" />
     </template>
-
+     <template v-if="element.type == 'text'">
+       <h4 style="text-align:center;margin:10px auto">
+         {{element.name}}
+       </h4>
+    </template>
     <template v-if="element.type == 'textarea'">
       <el-input :rows="5"
                 v-model="element.options.defaultValue"

diff --git a/src/components/FormDesigner/componentsConfig.js b/src/components/FormDesigner/componentsConfig.js
@@ -15,6 +15,11 @@ export const basicComponents = [
       placeholder: '',
     },
   },
+  {
+    type: 'text',
+    name: '文本',
+    icon: 'language',
+  },
   {
     type: 'textarea',
     name: '多行文本',