feat: 新增否显示表单标签

jianganglu · Mar 3, 2020 · 1c5983f · 1c5983f
1 parent 2bcf1f9
commit 1c5983f
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 212 deletions.
diff --git a/src/components/generator/config.js b/src/components/generator/config.js
@@ -19,6 +19,7 @@ export const inputComponents = [
     placeholder: '请输入',
     defaultValue: undefined,
     span: 24,
+    showLabel: true,
     labelWidth: null,
     style: { width: '100%' },
     clearable: true,
@@ -43,6 +44,7 @@ export const inputComponents = [
     placeholder: '请输入',
     defaultValue: undefined,
     span: 24,
+    showLabel: true,
     labelWidth: null,
     autosize: {
       minRows: 4,
@@ -66,6 +68,7 @@ export const inputComponents = [
     defaultValue: undefined,
     span: 24,
     'show-password': true,
+    showLabel: true,
     labelWidth: null,
     style: { width: '100%' },
     clearable: true,
@@ -89,6 +92,7 @@ export const inputComponents = [
     placeholder: '',
     defaultValue: undefined,
     span: 24,
+    showLabel: true,
     labelWidth: null,
     min: undefined,
     max: undefined,
@@ -112,6 +116,7 @@ export const selectComponents = [
     placeholder: '请选择',
     defaultValue: undefined,
     span: 24,
+    showLabel: true,
     labelWidth: null,
     style: { width: '100%' },
     clearable: true,
@@ -137,6 +142,7 @@ export const selectComponents = [
     placeholder: '请选择',
     defaultValue: [],
     span: 24,
+    showLabel: true,
     labelWidth: null,
     style: { width: '100%' },
     props: {
@@ -174,6 +180,7 @@ export const selectComponents = [
     tagIcon: 'radio',
     defaultValue: undefined,
     span: 24,
+    showLabel: true,
     labelWidth: null,
     style: {},
     optionType: 'default',
@@ -198,6 +205,7 @@ export const selectComponents = [
     tagIcon: 'checkbox',
     defaultValue: [],
     span: 24,
+    showLabel: true,
     labelWidth: null,
     style: {},
     optionType: 'default',
@@ -222,6 +230,7 @@ export const selectComponents = [
     tagIcon: 'switch',
     defaultValue: false,
     span: 24,
+    showLabel: true,
     labelWidth: null,
     style: {},
     disabled: false,
@@ -242,6 +251,7 @@ export const selectComponents = [
     tagIcon: 'slider',
     defaultValue: null,
     span: 24,
+    showLabel: true,
     labelWidth: null,
     disabled: false,
     required: true,
@@ -261,6 +271,7 @@ export const selectComponents = [
     placeholder: '请选择',
     defaultValue: null,
     span: 24,
+    showLabel: true,
     labelWidth: null,
     style: { width: '100%' },
     disabled: false,
@@ -281,6 +292,7 @@ export const selectComponents = [
     tagIcon: 'time-range',
     defaultValue: null,
     span: 24,
+    showLabel: true,
     labelWidth: null,
     style: { width: '100%' },
     disabled: false,
@@ -304,6 +316,7 @@ export const selectComponents = [
     defaultValue: null,
     type: 'date',
     span: 24,
+    showLabel: true,
     labelWidth: null,
     style: { width: '100%' },
     disabled: false,
@@ -322,6 +335,7 @@ export const selectComponents = [
     tagIcon: 'date-range',
     defaultValue: null,
     span: 24,
+    showLabel: true,
     labelWidth: null,
     style: { width: '100%' },
     type: 'daterange',
@@ -344,6 +358,7 @@ export const selectComponents = [
     tagIcon: 'rate',
     defaultValue: 0,
     span: 24,
+    showLabel: true,
     labelWidth: null,
     style: {},
     max: 5,
@@ -361,6 +376,7 @@ export const selectComponents = [
     tag: 'el-color-picker',
     tagIcon: 'color',
     defaultValue: null,
+    showLabel: true,
     labelWidth: null,
     'show-alpha': false,
     'color-format': '',
@@ -377,6 +393,7 @@ export const selectComponents = [
     tagIcon: 'upload',
     action: 'https://jsonplaceholder.typicode.com/posts/',
     defaultValue: null,
+    showLabel: true,
     labelWidth: null,
     disabled: false,
     required: true,

diff --git a/src/components/generator/drawingDefalut.js b/src/components/generator/drawingDefalut.js
@@ -9,6 +9,8 @@ export default [
     placeholder: '请输入手机号',
     defaultValue: '',
     span: 24,
+    showLabel: true,
+    labelWidth: null,
     style: { width: '100%' },
     clearable: true,
     prepend: '',
@@ -24,6 +26,7 @@ export default [
     regList: [{
       pattern: '/^1(3|4|5|7|8|9)\\d{9}$/',
       message: '手机号格式错误'
-    }]
+    }],
+    document: 'https://element.eleme.cn/#/zh-CN/component/input'
   }
 ]
diff --git a/src/components/generator/html.js b/src/components/generator/html.js
@@ -81,12 +81,17 @@ function colWrapper(element, str) {
 const layouts = {
   colFormItem(element) {
     let labelWidth = ''
+    let label = `label="${element.label}"`
     if (element.labelWidth && element.labelWidth !== confGlobal.labelWidth) {
       labelWidth = `label-width="${element.labelWidth}px"`
     }
+    if(element.showLabel === false) {
+      labelWidth = 'label-width="0"'
+      label = ''
+    }
     const required = !trigger[element.tag] && element.required ? 'required' : ''
     const tagDom = tags[element.tag] ? tags[element.tag](element) : null
-    let str = `<el-form-item ${labelWidth} label="${element.label}" prop="${element.vModel}" ${required}>
+    let str = `<el-form-item ${labelWidth} ${label} prop="${element.vModel}" ${required}>
         ${tagDom}
       </el-form-item>`
     str = colWrapper(element, str)

diff --git a/src/views/index/DraggableItem.vue b/src/views/index/DraggableItem.vue
@@ -27,8 +27,8 @@ const layouts = {
     return (
       <el-col span={element.span} class={className}
         nativeOnClick={event => { activeItem(element); event.stopPropagation() }}>
-        <el-form-item label-width={element.labelWidth ? `${element.labelWidth}px` : null}
-          label={element.label} required={element.required}>
+        <el-form-item label-width={element.showLabel ? element.labelWidth ? `${element.labelWidth}px` : null : '0'}
+          label={element.showLabel ? element.label: ''} required={element.required}>
           <render key={element.renderKey} conf={element} onInput={ event => {
             this.$set(element, 'defaultValue', event)
           }} />

diff --git a/src/views/index/RightPanel.vue b/src/views/index/RightPanel.vue
@@ -371,6 +371,9 @@
             <el-color-picker v-model="activeData['inactive-color']" />
           </el-form-item>
 
+          <el-form-item v-if="activeData.showLabel !== undefined && activeData.labelWidth !== undefined" label="显示标签">
+            <el-switch v-model="activeData.showLabel" />
+          </el-form-item>
           <el-form-item v-if="activeData['allow-half'] !== undefined" label="允许半选">
             <el-switch v-model="activeData['allow-half']" />
           </el-form-item>