vueblocks · xiaoluoboding · Nov 1, 2019 · Oct 31, 2019 · Oct 31, 2019 · Oct 31, 2019
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,12 @@
+## [0.1.3](https://github.com/vueblocks/element-schema-form/compare/v0.1.2...v0.1.3) (2019-11-01)
+
+
+### Bug Fixes
+
+*  schema-form插槽错误 ([fe43fbb](https://github.com/vueblocks/element-schema-form/commit/fe43fbb4c47984f092254536eff93c800617e6e7))
+
+
+
 ## [0.1.2](https://github.com/vueblocks/element-schema-form/compare/v0.1.1...v0.1.2) (2019-10-30)
 
 
@@ -7,41 +16,41 @@
 
 ### Features
 
-* 新增【重置表单】功能 ([9da36a3](https://github.com/vueblocks/element-schema-form/commit/9da36a3))
+* 新增【重置表单】功能 ([9da36a3](https://github.com/vueblocks/element-schema-form/commit/9da36a37cadf06bedabf4bbdb9994ac620fa13e3))
 
 
 
-# [0.1.0](https://github.com/vueblocks/element-schema-form/compare/9c61589...v0.1.0) (2019-10-28)
+# [0.1.0](https://github.com/vueblocks/element-schema-form/compare/9c615890fe925a11c33f3b3534381332b9867cf7...v0.1.0) (2019-10-28)
 
 
 ### Bug Fixes
 
-* copy 激活行数调整，api将module修改为model ([d3682be](https://github.com/vueblocks/element-schema-form/commit/d3682be))
+* copy 激活行数调整，api将module修改为model ([d3682be](https://github.com/vueblocks/element-schema-form/commit/d3682be362dec1c3f96ee120fcebaf27664a75e4))
 
 
 ### Features
 
-* 🌈完成生成 Vue 代码功能 ([215dac0](https://github.com/vueblocks/element-schema-form/commit/215dac0))
-* 💥引入 vuex-persistedstate 数据持久化插件 ([e825350](https://github.com/vueblocks/element-schema-form/commit/e825350))
-* 📋添加复制代码到剪切板功能 ([8e069b3](https://github.com/vueblocks/element-schema-form/commit/8e069b3))
-* 修改布局算法 ([0d38a49](https://github.com/vueblocks/element-schema-form/commit/0d38a49))
-* 基础组件 ([9c61589](https://github.com/vueblocks/element-schema-form/commit/9c61589))
-* 增加json编辑器 ([3887414](https://github.com/vueblocks/element-schema-form/commit/3887414))
-* 增加列跨度配置 ([b6d72c6](https://github.com/vueblocks/element-schema-form/commit/b6d72c6))
-* 增加拓展组件 ([d635fdd](https://github.com/vueblocks/element-schema-form/commit/d635fdd))
-* 增加组件个性化属性(1) ([2ca9dc7](https://github.com/vueblocks/element-schema-form/commit/2ca9dc7))
-* 增加组件基础属性编辑 ([30d335e](https://github.com/vueblocks/element-schema-form/commit/30d335e))
-* 增加表单预览 ([a70c222](https://github.com/vueblocks/element-schema-form/commit/a70c222))
-* 处理左侧布局删除列逻辑 ([c047010](https://github.com/vueblocks/element-schema-form/commit/c047010))
-* 完成生成 Schema 功能 ([dcbe5c5](https://github.com/vueblocks/element-schema-form/commit/dcbe5c5))
-* 搭建表单生成器页面 ([62d3085](https://github.com/vueblocks/element-schema-form/commit/62d3085))
-* 新增/删除行 ([f99ad57](https://github.com/vueblocks/element-schema-form/commit/f99ad57))
-* 新增tag等基本组件 ([3e8c38d](https://github.com/vueblocks/element-schema-form/commit/3e8c38d))
-* 新增列排序功能 ([0a74c03](https://github.com/vueblocks/element-schema-form/commit/0a74c03))
-* 新增行复制 ([6698e11](https://github.com/vueblocks/element-schema-form/commit/6698e11))
-* 新增表单列删除功能 ([c08c8c0](https://github.com/vueblocks/element-schema-form/commit/c08c8c0))
-* 新增表单配置面板 ([ecdbee5](https://github.com/vueblocks/element-schema-form/commit/ecdbee5))
-* 私有属性调整 ([cf61919](https://github.com/vueblocks/element-schema-form/commit/cf61919))
+* 🌈完成生成 Vue 代码功能 ([215dac0](https://github.com/vueblocks/element-schema-form/commit/215dac0ce0987f5e59b3507a51f5431da59af09e))
+* 💥引入 vuex-persistedstate 数据持久化插件 ([e825350](https://github.com/vueblocks/element-schema-form/commit/e825350561a37de53ecb78fa4d789bc7875ada5e))
+* 📋添加复制代码到剪切板功能 ([8e069b3](https://github.com/vueblocks/element-schema-form/commit/8e069b36113d7357705d30acf77b208b4a8d70b9))
+* 修改布局算法 ([0d38a49](https://github.com/vueblocks/element-schema-form/commit/0d38a493503b80369276d6756de037571ea9847d))
+* 基础组件 ([9c61589](https://github.com/vueblocks/element-schema-form/commit/9c615890fe925a11c33f3b3534381332b9867cf7))
+* 增加json编辑器 ([3887414](https://github.com/vueblocks/element-schema-form/commit/38874147675504d40a670bacd4373dd109bc5f45))
+* 增加列跨度配置 ([b6d72c6](https://github.com/vueblocks/element-schema-form/commit/b6d72c60720645b02076466f3bbd67e215934b3e))
+* 增加拓展组件 ([d635fdd](https://github.com/vueblocks/element-schema-form/commit/d635fdd40349e93eecda0f52a9c249d2b87b0a6a))
+* 增加组件个性化属性(1) ([2ca9dc7](https://github.com/vueblocks/element-schema-form/commit/2ca9dc74b296f6d0de97d6493245cde3aeca5afe))
+* 增加组件基础属性编辑 ([30d335e](https://github.com/vueblocks/element-schema-form/commit/30d335ebede61056ca1c5c941d673a638c14429c))
+* 增加表单预览 ([a70c222](https://github.com/vueblocks/element-schema-form/commit/a70c2222bc5358cd2e440299d0acd78032649599))
+* 处理左侧布局删除列逻辑 ([c047010](https://github.com/vueblocks/element-schema-form/commit/c04701062e7eb8fbc2b59f66b8675cb15c172c5e))
+* 完成生成 Schema 功能 ([dcbe5c5](https://github.com/vueblocks/element-schema-form/commit/dcbe5c51500a3f6b63985597b275d954a464ac3c))
+* 搭建表单生成器页面 ([62d3085](https://github.com/vueblocks/element-schema-form/commit/62d30855341080e3de09b4291263fca3228cd5e5))
+* 新增/删除行 ([f99ad57](https://github.com/vueblocks/element-schema-form/commit/f99ad57357db78ba3fc4f31aaee6a61e17d1a49b))
+* 新增tag等基本组件 ([3e8c38d](https://github.com/vueblocks/element-schema-form/commit/3e8c38d56962faeb4e9f13a28f9af1fa9b8b863e))
+* 新增列排序功能 ([0a74c03](https://github.com/vueblocks/element-schema-form/commit/0a74c03c62e4ada86d98127566a8cb5449cc324e))
+* 新增行复制 ([6698e11](https://github.com/vueblocks/element-schema-form/commit/6698e11a3505fa884026ccfe981d543b82086cb4))
+* 新增表单列删除功能 ([c08c8c0](https://github.com/vueblocks/element-schema-form/commit/c08c8c0c44bdb3ed76d9fce333992069cfb972d6))
+* 新增表单配置面板 ([ecdbee5](https://github.com/vueblocks/element-schema-form/commit/ecdbee5557f6cddfe28617939f189d4f9de61992))
+* 私有属性调整 ([cf61919](https://github.com/vueblocks/element-schema-form/commit/cf6191953e5117db4138d255dfd438022c03ddf5))
 
 
 
diff --git a/docs/.vuepress/components/add-item.vue b/docs/.vuepress/components/add-item.vue
@@ -0,0 +1,95 @@
+<template>
+  <section class="basic-add-item">
+    <el-form size="small" label-width="100px" :model="model" :rules="rules"  ref="ruleForm">
+      <schema-form
+        :model="model"
+        :schema="schema"
+      >
+        <el-button 
+          v-for="flag in indexList" 
+          :key="flag" 
+          :slot="`delete_${flag}`"
+          size="small" 
+          type="primary" 
+          class="delBtn"
+          @click="delDomain(flag)"
+        >删除</el-button>
+        <el-form-item slot="submit">
+          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+          <el-button type="primary" plain @click="addDomain">新增域名</el-button>
+          <el-button @click="resetForm('ruleForm')">重置</el-button>
+        </el-form-item>
+      </schema-form>
+    </el-form>
+  </section>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      indexList: [0],
+      flagRecord: 0,
+      ss: 'delete_0',
+      model: {
+        email: '',
+        domains_0: ''
+      },
+      rules: {
+        email: [
+          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
+        ]
+      }
+    }
+  },
+  computed: {
+    schema () {
+      let _list = this.indexList.map((flag, index) => ([
+        { 
+          type: 'input', 
+          prop: `domains_${flag}`, 
+          formItem: { label: `域名${index}`, 
+          rules: { required: true, message: '域名不能为空', trigger: 'blur' } }, 
+          colGrid: { span: 20 } 
+        },
+        { slot: `delete_${flag}`, colGrid: { span: 4 }  }
+      ]))
+      return [
+        [ { type: 'input', prop: 'email', formItem: { label: '邮箱' } } ],
+        ..._list,
+        [ { slot: 'submit' } ]
+      ]
+    }
+  },
+  methods: {
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert('submit!');
+        } else {
+          return false;
+        }
+      })
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields()
+    },
+    addDomain () {
+      this.flagRecord += 1
+      this.indexList.push(this.flagRecord)
+    },
+    delDomain (flag) {
+      this.indexList = this.indexList.filter(idx => idx !== flag)
+      this.model = this.model.$delete(`delete_${flag}`)
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+.basic-add-item .delBtn{
+  margin-left: 20px;
+}
+</style>
diff --git a/docs/.vuepress/components/basic-validate.vue b/docs/.vuepress/components/basic-validate.vue
@@ -0,0 +1,144 @@
+<template>
+  <section class="basic-instance">
+    <el-form size="small" label-width="100px" :model="model" :rules="rules"  ref="ruleForm">
+      <schema-form
+        :model="model"
+        :layout="layout"
+        :schema="schema"
+        :options="options"
+      >
+        <div class="line" slot="line"></div>
+        <el-form-item slot="submit">
+          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+          <el-button @click="resetForm('ruleForm')">重置</el-button>
+        </el-form-item>
+      </schema-form>
+    </el-form>
+  </section>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      layout: {
+        type: 'flex',
+        align: 'middle'
+      },
+      model: {
+        name: '',
+        region: '',
+        date1: '',
+        date2: '',
+        delivery: false,
+        type: [],
+        resource: '',
+        desc: ''
+      },
+      schema: [
+        [
+          { type: 'input', prop: 'name', formItem: { label: '活动名称' } }
+        ],
+        [
+          { type: 'select', prop: 'region', formItem: { label: '活动区域' } }
+        ],
+        [
+          {
+            type: 'datepicker', 
+            prop: 'date1', 
+            formItem: { label: '活动时间' }, 
+            colGrid: { span:11 } 
+          },
+          { slot: 'line', colGrid: { span:2 } },
+          { 
+            type: 'timeselect', 
+            prop: 'date2', 
+            formItem: { label: '', 'label-width': '0px' }, 
+            colGrid: { span:11 }
+          }
+        ],
+        [
+          { type: 'switch', prop: 'delivery', formItem: { label: '即时配送' } }
+        ],
+        [
+          { type: 'checkbox', prop: 'type', formItem: { label: '活动性质' } }
+        ],
+        [
+          { type: 'radio', prop: 'resource', formItem: { label: '特殊资源' } }
+        ],
+        [
+          {
+            type: 'input', 
+            prop: 'desc', 
+            formItem: { label: '活动形式' }, 
+            attrs: { type: 'textarea' } 
+          }
+        ],
+        [
+          { slot: 'submit' }
+        ]
+      ],
+      options: {
+        region: [
+          { label: '区域一', value: 'shanghai' },
+          { label: '区域二', value: 'beijing' }
+        ],
+        type: [
+          { label: '美食/餐厅线上活动', value: '美食/餐厅线上活动' }, 
+          { label: '地推活动', value: '地推活动' }
+        ],
+        resource: [
+          { label: '线上品牌商赞助', value: '线上品牌商赞助' }, 
+          { label: '线下场地免费', value: '线下场地免费' }
+        ],
+      },
+      rules: {
+         name: [
+            { required: true, message: '请输入活动名称', trigger: 'blur' },
+            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
+          ],
+          region: [
+            { required: true, message: '请选择活动区域', trigger: 'change' }
+          ],
+          date1: [
+            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
+          ],
+          date2: [
+            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
+          ],
+          type: [
+            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
+          ],
+          resource: [
+            { required: true, message: '请选择活动资源', trigger: 'change' }
+          ],
+          desc: [
+            { required: true, message: '请填写活动形式', trigger: 'blur' }
+          ]
+      }
+    }
+  },
+  methods: {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
+          if (valid) {
+            alert('submit!');
+          } else {
+            return false;
+          }
+        })
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields()
+      }
+  }
+}
+</script>
+
+<style scoped>
+.basic-instance .line{
+  height: 2px;
+  background: rgb(220, 223, 230);
+  margin: -10px 5px 0;
+}
+</style>