表单设计器 · 开发教程代码

JakHuang · May 5, 2020 · 5f67e15 · 5f67e15 · flexzj · Jun 9, 2021
1 parent c1b9122
commit 5f67e15
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 1 deletion.
diff --git a/src/components/generator/config.js b/src/components/generator/config.js
@@ -519,5 +519,29 @@ export const layoutComponents = [
     type: 'default',
     justify: 'start',
     align: 'top'
+  },
+  {
+    __config__: {
+      label: '按钮',
+      showLabel: true,
+      changeTag: true,
+      labelWidth: null,
+      tag: 'el-button',
+      tagIcon: 'button',
+      defaultValue: undefined,
+      span: 24,
+      layout: 'colFormItem',
+      document: 'https://element.eleme.cn/#/zh-CN/component/button'
+    },
+    __slot__: {
+      default: '主要按钮'
+    },
+    type: 'primary',
+    icon: 'el-icon-search',
+    round: false,
+    size: 'medium',
+    plain: false,
+    circle: false,
+    disabled: false
   }
 ]
diff --git a/src/components/render/slots/el-button.js b/src/components/render/slots/el-button.js
@@ -0,0 +1,5 @@
+export default {
+  default(h, conf, key) {
+    return conf.__slot__[key]
+  }
+}
diff --git a/src/icons/svg/button.svg b/src/icons/svg/button.svg
diff --git a/src/views/index/RightPanel.vue b/src/views/index/RightPanel.vue
@@ -127,6 +127,16 @@
               </el-button>
             </el-input>
           </el-form-item>
+          <el-form-item
+            v-if="activeData['icon']!==undefined && activeData.__config__.tag === 'el-button'"
+            label="按钮图标"
+          >
+            <el-input v-model="activeData['icon']" placeholder="请输入按钮图标名称">
+              <el-button slot="append" icon="el-icon-thumb" @click="openIconsDialog('icon')">
+                选择
+              </el-button>
+            </el-input>
+          </el-form-item>
           <el-form-item v-if="activeData.__config__.tag === 'el-cascader'" label="选项分隔符">
             <el-input v-model="activeData.separator" placeholder="请输入选项分隔符" />
           </el-form-item>
@@ -247,6 +257,19 @@
               </el-radio-button>
             </el-radio-group>
           </el-form-item>
+          <el-form-item
+            v-if="activeData.type !== undefined && activeData.__config__.tag === 'el-button'"
+            label="按钮类型"
+          >
+            <el-select v-model="activeData.type" :style="{ width: '100%' }">
+              <el-option label="primary" value="primary" />
+              <el-option label="success" value="success" />
+              <el-option label="warning" value="warning" />
+              <el-option label="danger" value="danger" />
+              <el-option label="info" value="info" />
+              <el-option label="text" value="text" />
+            </el-select>
+          </el-form-item>
           <el-form-item
             v-if="activeData.__config__.buttonText !== undefined"
             v-show="'picture-card' !== activeData['list-type']"
@@ -417,7 +440,8 @@
             v-if="activeData.size !== undefined &&
               (activeData.__config__.optionType === 'button' ||
                 activeData.__config__.border ||
-                activeData.__config__.tag === 'el-color-picker')"
+                activeData.__config__.tag === 'el-color-picker' ||
+                activeData.__config__.tag === 'el-button')"
             label="选项尺寸"
           >
             <el-radio-group v-model="activeData.size">