样式更改

package.json

@@ -1,7 +1,7 @@
 {
   "name": "form-making",
   "description": "基于Vue,ElementUI开发的一款表单设计器，提高表单开发效率的利器，让开发者从枯燥的表单代码编写中解放出来",
-  "version": "1.1.23",
+  "version": "1.2.0",
   "author": "GavinZhulei",
   "license": "LGPL",
   "keywords": [

src/components/Container.vue

@@ -2,7 +2,7 @@
   <el-container class="fm2-container">
     <el-main class="fm2-main">
       <el-container>
-        <el-aside style="wdith: 250px;">
+        <el-aside width="250px">
           <div class="components-list">
             <div class="widget-cate">基础字段</div>
             <draggable tag="ul" :list="basicComponents" 
@@ -59,6 +59,7 @@
             <slot name="action">
             </slot>
             <el-button v-if="upload" type="text" size="medium" icon="el-icon-upload2" @click="handleUpload">导入JSON</el-button>
+            <el-button v-if="clearable" type="text" size="medium" icon="el-icon-delete" @click="handleClear">清空</el-button>
             <el-button v-if="preview" type="text" size="medium" icon="el-icon-view" @click="handlePreview">预览</el-button>
             <el-button v-if="generateJson" type="text" size="medium" icon="el-icon-tickets" @click="handleGenerateJson">生成JSON</el-button>
             <el-button v-if="generateCode" type="text" size="medium" icon="el-icon-document" @click="handleGenerateCode">生成代码</el-button>
@@ -87,7 +88,6 @@
           :visible="previewVisible"
           @on-close="previewVisible = false"
           ref="widgetPreview"
-          @on-submit="handleTest"
           width="1000px"
           form
         >
@@ -98,6 +98,11 @@
               高度：<el-input v-model="scope.model.blank.height" style="width: 100px"></el-input>
             </template>
           </generate-form>
+
+          <template slot="action">
+            <el-button type="primary" @click="handleTest">获取数据</el-button>
+            <el-button @click="handleReset">重置</el-button>
+          </template>
         </cus-dialog>
 
         <cus-dialog
@@ -123,7 +128,7 @@
           <div id="jsoneditor" style="height: 400px;width: 100%;">{{jsonTemplate}}</div>
 
           <template slot="action">
-            <el-button id="copybtn" data-clipboard-target=".ace_text-input">双击复制</el-button>
+            <el-button type="primary" class="json-btn" :data-clipboard-text="jsonCopyValue">复制数据</el-button>
           </template>
         </cus-dialog>
 
@@ -139,7 +144,7 @@
         </cus-dialog>
       </el-container>
     </el-main>
-    <el-footer height="30px">Powered by <a target="_blank" href="https://github.com/GavinZhuLei/vue-form-making">GavinZhuLei</a></el-footer>
+    <el-footer height="30px" style="font-weight: 600;">Powered by <a target="_blank" href="https://github.com/GavinZhuLei/vue-form-making">GavinZhuLei</a></el-footer>
   </el-container>
 
 </template>
@@ -183,6 +188,10 @@ export default {
     upload: {
       type: Boolean, 
       default: false
+    },
+    clearable: {
+      type: Boolean,
+      default: false
     }
   },
   data () {
@@ -195,7 +204,7 @@ export default {
         list: [],
         config: {
           labelWidth: 100,
-          labelPosition: 'top',
+          labelPosition: 'right',
           size: 'small'
         },
       },
@@ -222,215 +231,17 @@ export default {
             resolve(res.uptoken)
           })
         },
-        func_cascader (resolve) {
-            const options = [{
-              value: 'zhinan',
-              label: '指南',
-              children: [{
-                value: 'shejiyuanze',
-                label: '设计原则',
-                children: [{
-                  value: 'yizhi',
-                  label: '一致'
-                }, {
-                  value: 'fankui',
-                  label: '反馈'
-                }, {
-                  value: 'xiaolv',
-                  label: '效率'
-                }, {
-                  value: 'kekong',
-                  label: '可控'
-                }]
-              }, {
-                value: 'daohang',
-                label: '导航',
-                children: [{
-                  value: 'cexiangdaohang',
-                  label: '侧向导航'
-                }, {
-                  value: 'dingbudaohang',
-                  label: '顶部导航'
-                }]
-              }]
-            }, {
-              value: 'zujian',
-              label: '组件',
-              children: [{
-                value: 'basic',
-                label: 'Basic',
-                children: [{
-                  value: 'layout',
-                  label: 'Layout 布局'
-                }, {
-                  value: 'color',
-                  label: 'Color 色彩'
-                }, {
-                  value: 'typography',
-                  label: 'Typography 字体'
-                }, {
-                  value: 'icon',
-                  label: 'Icon 图标'
-                }, {
-                  value: 'button',
-                  label: 'Button 按钮'
-                }]
-              }, {
-                value: 'form',
-                label: 'Form',
-                children: [{
-                  value: 'radio',
-                  label: 'Radio 单选框'
-                }, {
-                  value: 'checkbox',
-                  label: 'Checkbox 多选框'
-                }, {
-                  value: 'input',
-                  label: 'Input 输入框'
-                }, {
-                  value: 'input-number',
-                  label: 'InputNumber 计数器'
-                }, {
-                  value: 'select',
-                  label: 'Select 选择器'
-                }, {
-                  value: 'cascader',
-                  label: 'Cascader 级联选择器'
-                }, {
-                  value: 'switch',
-                  label: 'Switch 开关'
-                }, {
-                  value: 'slider',
-                  label: 'Slider 滑块'
-                }, {
-                  value: 'time-picker',
-                  label: 'TimePicker 时间选择器'
-                }, {
-                  value: 'date-picker',
-                  label: 'DatePicker 日期选择器'
-                }, {
-                  value: 'datetime-picker',
-                  label: 'DateTimePicker 日期时间选择器'
-                }, {
-                  value: 'upload',
-                  label: 'Upload 上传'
-                }, {
-                  value: 'rate',
-                  label: 'Rate 评分'
-                }, {
-                  value: 'form',
-                  label: 'Form 表单'
-                }]
-              }, {
-                value: 'data',
-                label: 'Data',
-                children: [{
-                  value: 'table',
-                  label: 'Table 表格'
-                }, {
-                  value: 'tag',
-                  label: 'Tag 标签'
-                }, {
-                  value: 'progress',
-                  label: 'Progress 进度条'
-                }, {
-                  value: 'tree',
-                  label: 'Tree 树形控件'
-                }, {
-                  value: 'pagination',
-                  label: 'Pagination 分页'
-                }, {
-                  value: 'badge',
-                  label: 'Badge 标记'
-                }]
-              }, {
-                value: 'notice',
-                label: 'Notice',
-                children: [{
-                  value: 'alert',
-                  label: 'Alert 警告'
-                }, {
-                  value: 'loading',
-                  label: 'Loading 加载'
-                }, {
-                  value: 'message',
-                  label: 'Message 消息提示'
-                }, {
-                  value: 'message-box',
-                  label: 'MessageBox 弹框'
-                }, {
-                  value: 'notification',
-                  label: 'Notification 通知'
-                }]
-              }, {
-                value: 'navigation',
-                label: 'Navigation',
-                children: [{
-                  value: 'menu',
-                  label: 'NavMenu 导航菜单'
-                }, {
-                  value: 'tabs',
-                  label: 'Tabs 标签页'
-                }, {
-                  value: 'breadcrumb',
-                  label: 'Breadcrumb 面包屑'
-                }, {
-                  value: 'dropdown',
-                  label: 'Dropdown 下拉菜单'
-                }, {
-                  value: 'steps',
-                  label: 'Steps 步骤条'
-                }]
-              }, {
-                value: 'others',
-                label: 'Others',
-                children: [{
-                  value: 'dialog',
-                  label: 'Dialog 对话框'
-                }, {
-                  value: 'tooltip',
-                  label: 'Tooltip 文字提示'
-                }, {
-                  value: 'popover',
-                  label: 'Popover 弹出框'
-                }, {
-                  value: 'card',
-                  label: 'Card 卡片'
-                }, {
-                  value: 'carousel',
-                  label: 'Carousel 走马灯'
-                }, {
-                  value: 'collapse',
-                  label: 'Collapse 折叠面板'
-                }]
-              }]
-            }, {
-              value: 'ziyuan',
-              label: '资源',
-              children: [{
-                value: 'axure',
-                label: 'Axure Components'
-              }, {
-                value: 'sketch',
-                label: 'Sketch Templates'
-              }, {
-                value: 'jiaohu',
-                label: '组件交互文档'
-              }]
-            }]
-
-            resolve(options)
-        },
         upload_callback (response, file, fileList) {
           console.log('callback', response, file, fileList)
         }
       },
-      widgetModels: {
-      },
+      widgetModels: {},
       blank: '',
       htmlTemplate: '',
       jsonTemplate: '',
       uploadEditor: null,
+      jsonCopyValue: '',
+      jsonClipboard: null,
       jsonEg: `{
   "list": [
     {
@@ -511,6 +322,9 @@ export default {
         this.$refs.widgetPreview.end()
       })
     },
+    handleReset () {
+      this.$refs.generateForm.reset()
+    },
     handleGenerateJson () {
       this.jsonVisible = true
       this.jsonTemplate = this.widgetForm
@@ -520,7 +334,13 @@ export default {
         const editor = ace.edit('jsoneditor')
         editor.session.setMode("ace/mode/json")
 
-        const btnCopy = new Clipboard('#copybtn')
+        if (!this.jsonClipboard) {
+          this.jsonClipboard = new Clipboard('.json-btn')
+          this.jsonClipboard.on('success', (e) => {
+            this.$message.success('复制成功')
+          })
+        }
+        this.jsonCopyValue = JSON.stringify(this.widgetForm)
       })
     },
     handleGenerateCode () {
@@ -547,6 +367,19 @@ export default {
         this.$refs.uploadJson.end()
       }
     },
+    handleClear () {
+      this.widgetForm = {
+        list: [],
+        config: {
+          labelWidth: 100,
+          labelPosition: 'right',
+          size: 'small',
+          customClass: ''
+        },
+      }
+
+      this.widgetFormSelect = {}
+    },
     getJSON () {
       return this.widgetForm
     },

src/components/GenerateForm.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <el-form ref="generateForm" 
+      label-suffix=":"
       :size="data.config.size"
       :model="models" :rules="rules" :label-position="data.config.labelPosition" :label-width="data.config.labelWidth + 'px'">
       <template v-for="item in data.list">
@@ -113,6 +114,9 @@ export default {
         })
       })
     },
+    reset () {
+      this.$refs.generateForm.resetFields()
+    },
     refresh () {
       
     }