# install the dependencies
npm install lazyform -S
# or
yarn add lazyform

<template>
  <lazy-form v-model="formData" :fields="formFields" @submit="onSubmit"/>
</template>
<script>
  // ----- main.js -----
  // ...
  import Vue from 'vue'
  import lazyform, {MakeField} from 'lazyform'

  //import formFieldConfig from '<your path>/formFieldConfig'
  const formFieldConfig = {
    fields: {
      // 全局字段描述
      account: MakeField('input', 'user name').rules([{min: 6}]),
      name: MakeField('input', 'user name').rules([{max: 15}]).required(),
      email: MakeField('input', 'email').pattern("/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/")
    },
    submitBtnClass: '',
    resetBtnClass: '',
    buttonBtnClass: ''
  }

  Vue.use(lazyform, formFieldConfig) // Register the Fields globally
  // ...
  // ------ main.js end ------

  export default {
    data() {
      return {
        formData: {},
        formFields: {
          // <字段名>:<string:参考值|object字段描述>
          name: '',
          email: '',
          autoFields: 'a@demo.com', // 未知字段:尝试全局字段描述中的正则表达式匹配
          account: {required: true} // 按实际需求调整字段描述，以适用不同的使用场景。
        }
      }
    },
    methods: {
      onSubmit($event) {
        // ...
      }
    }
  }
</script>

<template>
  <lazy-form v-model="formData" :fields="formFields" @submit="onSubmit"/>
</template>
<script>
  import lazyForm, {MakeField} from 'lazyform'

  export default {
    components: {lazyForm},
    data() {
      return {
        formData: {},
        formFields: {
          // 字段描述
          name: MakeField('input', 'user name').rules([{max: 15}]).required(),
        }
      }
    },
    methods: {
      onSubmit($event) {
        // ...
      }
    }
  }
</script>