调整文件目录结构

examples/App.vue

 <template>
   <div id="app">
-    <ezj-container :menus="menus" default-active="profile"></ezj-container>
-    <!-- <ezj-tab-form title="填写报名表" :tabs="tabs"></ezj-tab-form> -->
-    <!-- <ezj-tabs title="填写报名表" v-model="activeName">
-      <ezj-tab-pane label="个人信息" name="one" :required="true">
-        <ezj-form :options="formOptions" :model="formModel" :items="formItems" @submit="onSubmit"></ezj-form>
-      </ezj-tab-pane>
-      <ezj-tab-pane label="教育背景" name="two" :required="true">
-        <ezj-form :options="formOptions" :model="formModel" :items="formItems" @submit="onSubmit"></ezj-form>
-      </ezj-tab-pane>
-      <ezj-tab-pane label="工作经验" name="three" :required="true"></ezj-tab-pane>
-      <ezj-tab-pane label="学习目的" name="four" :required="true"></ezj-tab-pane>
-      <ezj-tab-pane label="资料上传" name="five" :required="true"></ezj-tab-pane>
-      <ezj-tab-pane label="所受培训" name="six"></ezj-tab-pane>
-      <ezj-tab-pane label="荣誉奖励" name="seven"></ezj-tab-pane>
-      <ezj-tab-pane label="最终检查" name="eight" :required="true"></ezj-tab-pane>
-      <ezj-tab-pane label="申请声明" name="nine" :required="true"></ezj-tab-pane>
-    </ezj-tabs>-->
+    <vue-form :menus="menus" default-active="profile"></vue-form>
   </div>
 </template>
 <script>
-// import registerForm from './page/registerForm'
-import sofiaForm from './sofia-form'
+import registerForm from './kelley-form'
+// import sofiaForm from './sofia-form'
 
 export default {
   name: 'app',
   data() {
     return {
-      menus: sofiaForm
+      // menus: sofiaForm,
+      menus: registerForm
     }
   },
   methods: {

src/Form.vue

-<template>
-  <div class="vue-form">
-    <el-form v-bind="options" ref="form" :model="ruleForm" @submit.native.prevent v-on="$listeners">
-      <template v-for="item in items">
-        <el-form-item
-          :key="item.model"
-          :prop="item.model"
-          :label="item.label"
-          :label-width="item.labelWidth || item['label-width']"
-          :required="item.required"
-          :rules="item.rules"
-          :size="item.size"
-        >
-          <template v-if="item.type === 'input'">
-            <el-input
-              v-bind="item.attrs"
-              v-on="$listeners"
-              v-model="ruleForm[item.model]"
-              :placeholder="item.placeholder"
-            ></el-input>
-          </template>
-
-          <template v-if="item.type === 'select'">
-            <el-select
-              v-bind="item.attrs"
-              v-on="$listeners"
-              v-model="ruleForm[item.model]"
-              :placeholder="item.placeholder"
-            >
-              <el-option
-                v-for="option in item.values"
-                :label="option.label"
-                :value="option.value"
-                :key="option.value"
-              ></el-option>
-            </el-select>
-          </template>
-
-          <template v-if="item.type === 'radio'">
-            <el-radio v-bind="item.attrs" :label="item.value">{{item.label}}</el-radio>
-          </template>
-
-          <template v-if="item.type === 'radioGroup'">
-            <el-radio-group v-bind="item.attrs" v-on="$listeners" v-model="ruleForm[item.model]">
-              <el-radio
-                v-for="radio in item.values"
-                :label="radio.value"
-                :key="radio.value"
-              >{{radio.label}}</el-radio>
-            </el-radio-group>
-          </template>
-
-          <template v-if="item.type === 'datePicker'">
-            <el-date-picker
-              v-bind="item.attrs"
-              v-on="$listeners"
-              v-model="ruleForm[item.model]"
-              :placeholder="item.placeholder"
-            ></el-date-picker>
-          </template>
-        </el-form-item>
-      </template>
-      <el-form-item>
-        <slot>
-          <el-button type="primary" @click="onSubmit">保存</el-button>
-        </slot>
-      </el-form-item>
-    </el-form>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'EzjForm',
-  props: {
-    options: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    model: {
-      type: Object,
-      default() {
-        return {}
-      }
-    },
-    items: {
-      type: Array,
-      default() {
-        return []
-      }
-    }
-  },
-  data() {
-    return {
-      ruleForm: {}
-    }
-  },
-  watch: {
-    model: {
-      immediate: true,
-      deep: true,
-      handler(value) {
-        this.ruleForm = value
-      }
-    }
-  },
-  computed: {
-    $form() {
-      return this.$refs['form']
-    }
-  },
-  methods: {
-    validate() {
-      return this.$form.validate(...arguments)
-    },
-    validateField() {
-      return this.$form.validateField(...arguments)
-    },
-    resetFields() {
-      return this.$form.resetFields(...arguments)
-    },
-    clearValidate() {
-      return this.$form.clearValidate(...arguments)
-    },
-    onSubmit() {
-      this.validate().then(() => {
-        this.$emit('onSubmit', this.model)
-      })
-    }
-  }
-}
-</script>

src/MultipleForm.vue

-<template>
-  <div class="multiple-form"></div>
-</template>
-
-<script>
-export default {
-  name: 'MultipleForm',
-  data() {
-    return {}
-  },
-  methods: {}
-}
-</script>
-<style lang="scss">
-</style>

src/Container.vue → src/VueForm.vue

@@ -12,13 +12,13 @@
 </template>
 
 <script>
-import EzjAside from './Aside'
-import EzjMenu from './Menu'
-import EzjMain from './Main'
-import EzjFormPane from './FormPane'
+import EzjAside from '@/components/layout/Aside'
+import EzjMenu from '@/components/layout/Menu'
+import EzjMain from '@/components/layout/Main'
+import EzjFormPane from '@/components/layout/FormPane'
 
 export default {
-  name: 'EzjContainer',
+  name: 'VueForm',
   props: {
     menus: {
       type: Array,

src/index.js

 import ElemForm from './components/elem-form'
 import FormForm from './components/form-form'
 
-import EzjContainer from './Container'
+import VueForm from './VueForm'
 
-const components = [EzjContainer]
+const components = [VueForm]
 
 const install = function(Vue) {
   if (install.installed) return