# Vue-forms

**> A Vue.js tabs framework replacing the URL-ROUTER for Vue2.0 (多tab页轻型框架，在多tab系统中替代路由)

- [Documentation](./docs)

## Demo  

[查看 DEMO](http://awfully.vip/vue-forms)**

![image](./example/assets/shot.png)

## Usage

**Step1 New instance & use**

``` JavaScript
import VueForms from 'zpw-vue-forms'
Vue.use(VueForms)
```

**Step2. Html Element**

``` html
<vue-forms ref="formId" :formData=formData :formId="formId"></vue-forms>
<el-button @click="submit()">提交</el-button>
```
**Step3. config**
``` JavaScript
export default {
    data(){
        return {
            formId:"login",
            formData:[{
                qid:"name",
                name:"姓名",
                type:"input-text",
                rule:"notNull",
                placeholder:"请输入姓名"
             },{
                qid:"phone",
                name:"手机号码",
                type:"input-number",
                rule:"notNull",
                placeholder:"请输入手机号码"
            }]
        }
    }
}
```

**Step4. Use api to open a tab**

``` JavaScript
submit(){
    const self = this;
    self.$refs.formId.$refs[self.formId].validate(valid => {
        if (valid) {
            let formData = self.$util.formatFormData(self.$refs.formId.forms);
        }
    })
}
```

## Contributing

**[Contributing](./.github/CONTRIBUTING.md)**