example: update preview demo

Author: felixpy

.github/preview.gif

@@ -1,3 +1,11 @@
 # element-form-builder
 
-Build form of element-ui using JSON configuration.
+[![Version](https://img.shields.io/npm/v/element-form-builder.svg)](https://www.npmjs.com/package/element-form-builder)
+[![License](https://img.shields.io/npm/l/element-form-builder.svg)](https://www.npmjs.com/package/element-form-builder)
+[![Dependencies](https://img.shields.io/david/codetrial/element-form-builder.svg)](https://www.npmjs.com/package/element-form-builder)
+
+Build element-ui forms with JSON schema.
+
+## Example
+
+![Screen Capture](.github/preview.gif)

README.md

@@ -96,6 +96,9 @@ var FormBuilder = {
       }
     }, [].concat(toConsumableArray(vm.$slots.prepend || []), toConsumableArray(vm.renderFormItems(h) || []), toConsumableArray(vm.$slots.append || [])));
   },
+  created: function created() {
+    this.$emit('input', this.formValues);
+  },
 
 
   methods: {

dist/index.js

@@ -9,8 +9,10 @@
       </div>
       <el-row :gutter="24">
         <el-col :span="8">
-          <el-form-builder :config="formConfig" :model="formValues" label-width="80px">
-            <el-button>提交</el-button>
+          <el-form-builder :config="formConfig" v-model="formValues" label-width="80px">
+            <div slot="append" class="submit-item">
+              <el-button type="primary" @click="showResultModal = true">提交</el-button>
+            </div>
           </el-form-builder>
         </el-col>
         <el-col :span="8">
@@ -21,6 +23,13 @@
         </el-col>
       </el-row>
     </el-card>
+
+    <el-dialog title="提交结果" :visible.sync="showResultModal" width="30%">
+      <pre>{{ JSON.stringify(formValues, null, 4) }}</pre>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="showResultModal = false">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -47,8 +56,15 @@ export default {
 
   data() {
     return {
+      showResultModal: false,
+
       formValues: {
-        title: ''
+        title: '',
+        desc: '',
+        date: null,
+        area: [],
+        subject: [],
+        tag: []
       },
 
       formConfig: {
@@ -76,7 +92,81 @@ export default {
                 label: '标题'
               },
               detail: {
-                name: 'title'
+                name: 'title',
+                defaultValue: '默认标题'
+              }
+            },
+            {
+              tag: 'el-input',
+              item: {
+                label: '描述'
+              },
+              detail: {
+                type: 'textarea',
+                name: 'desc',
+                placeholder: '请填写一个精彩的描述',
+                rows: 3
+              }
+            },
+            {
+              tag: 'el-date-picker',
+              item: {
+                label: '日期'
+              },
+              detail: {
+                name: 'date',
+                placeholder: '请选择日期',
+                valueFormat: 'yyyyMMdd'
+              }
+            },
+            {
+              tag: 'el-radio',
+              item: {
+                label: '地区'
+              },
+              detail: {
+                name: 'area',
+                items: [
+                  { text: '北京', label: '1' },
+                  { text: '上海', label: '2' },
+                  { text: '广州', label: '3' },
+                  { text: '深圳', label: '4' }
+                ]
+              }
+            },
+            {
+              tag: 'el-checkbox',
+              item: {
+                label: '主题'
+              },
+              detail: {
+                name: 'subject',
+                items: [
+                  { text: '历史', label: '1' },
+                  { text: '战争', label: '2' },
+                  { text: '科幻', label: '3' },
+                  { text: '爱情', label: '4' },
+                  { text: '文艺', label: '5' },
+                  { text: '生活', label: '6' }
+                ]
+              }
+            },
+            {
+              tag: 'el-select',
+              item: {
+                label: '标签'
+              },
+              detail: {
+                name: 'tag',
+                multiple: true,
+                items: [
+                  { label: '温暖', value: '1' },
+                  { label: '感动', value: '2' },
+                  { label: '刺激', value: '3' },
+                  { label: '紧张', value: '4' },
+                  { label: '有爱', value: '5' },
+                  { label: '搞笑', value: '6' }
+                ]
               }
             }
           ],
@@ -89,13 +179,27 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .preview {
   height: 100%;
   margin: 48px;
 }
 
+.submit-item {
+  margin-left: 80px;
+}
+
 .pull-right {
   float: right;
 }
+
+.el-radio-group .el-radio,
+.el-checkbox-group .el-checkbox {
+  margin-right: 30px;
+}
+
+.el-radio-group .el-radio + .el-radio,
+.el-checkbox-group .el-checkbox + .el-checkbox {
+  margin-left: 0;
+}
 </style>

examples/simple-demo/src/components/FormBuilderPreview.vue

@@ -1,7 +1,7 @@
 {
   "name": "element-form-builder",
   "version": "0.1.0",
-  "description": "Build form of element-ui using JSON configuration.",
+  "description": "Build element-ui forms with JSON schema.",
   "main": "dist/index.js",
   "scripts": {
     "build": "node scripts/build.js",

package.json

@@ -74,6 +74,10 @@ export default {
     )
   },
 
+  created () {
+    this.$emit('input', this.formValues)
+  },
+
   methods: {
     mergeValues () {
       const vm = this