1 | # Introduction
|
2 |
|
3 | **vue-dynamic-form-component** is a dynamic form component base on [element-ui](https://element.faas.ele.me/#/zh-CN) and [async-validator](https://github.com/yiminghe/async-validator). You just need to write **descriptors**(reference to [async-validator](https://github.com/yiminghe/async-validator)) of the data you want, **vue-dynamic-form-component** will generate the form automatically.
|
4 |
|
5 | ## Docs
|
6 |
|
7 | - [English Docs](http://vue-dynamic-form.quincychen.cn)
|
8 | - [中文文档](http://vue-dynamic-form.quincychen.cn/zh/)
|
9 |
|
10 | ## Usage Example
|
11 |
|
12 | ![vue-dynamic-form-component.gif](https://raw.githubusercontent.com/chenquincy/vue-dynamic-form-component/master/public/vue-dynamic-form-component.gif)
|
13 |
|
14 | ``` vue
|
15 | <template>
|
16 | <dynamic-form
|
17 | ref="dynamic-form"
|
18 | v-model="data"
|
19 | :descriptors="descriptors">
|
20 | <template slot="operations">
|
21 | <el-button @click="reset">reset</el-button>
|
22 | <el-button type="primary" @click="validate">validate</el-button>
|
23 | </template>
|
24 | </dynamic-form>
|
25 | </template>
|
26 |
|
27 | <script>
|
28 | // import and register element-ui first
|
29 | import DynamicForm from 'vue-dynamic-form-component'
|
30 |
|
31 | export default {
|
32 | components: {
|
33 | DynamicForm
|
34 | },
|
35 | data () {
|
36 | return {
|
37 | descriptors: {
|
38 | name: { type: 'string', min: 3, mex: 15, required: true },
|
39 | homepage: { type: 'url', message: 'The homepage must be an url' },
|
40 | company: {
|
41 | type: 'object',
|
42 | fields: {
|
43 | name: { type: 'string', required: true },
|
44 | address: {
|
45 | type: 'object',
|
46 | fields: {
|
47 | province: { type: 'string', required: true },
|
48 | city: { type: 'string' }
|
49 | }
|
50 | }
|
51 | }
|
52 | },
|
53 | children: {
|
54 | type: 'array',
|
55 | defaultField: {
|
56 | type: 'object',
|
57 | fields:{
|
58 | name: { type: 'string', min: 3, max: 15, required: true },
|
59 | age: { type: 'number', min: 1, max: 100, required: true }
|
60 | }
|
61 | }
|
62 | }
|
63 | },
|
64 | data: {}
|
65 | }
|
66 | },
|
67 | methods: {
|
68 | reset () {
|
69 | this.$refs['dynamic-form'].resetFields()
|
70 | },
|
71 | validate () {
|
72 | this.$refs['dynamic-form'].validate()
|
73 | }
|
74 | }
|
75 | }
|
76 | </script>
|
77 | ```
|
78 |
|
79 | ## Features
|
80 |
|
81 | - Generate form from **descriptors**
|
82 | - Support almost all data type
|
83 | - Support **multi-level form** for `Object `/ `Array` / `Hashmap`
|
84 | - Support data **validation**
|
85 | - **Multi-Languages** support
|
86 | - Support **custom component**
|
87 |
|
88 | ## Todo
|
89 |
|
90 | **vue-dynamic-form-component** can do more. There are a few things that it currently doesn't support but are planned:
|
91 |
|
92 | - [x] Custom component props
|
93 | - [x] Custom component event
|
94 | - [x] Custom component
|
95 | - [ ] Custom theme
|
96 | - [ ] Value change event
|
97 |
|
98 | ## Question
|
99 |
|
100 | Please submit your question in [Github Issue](https://github.com/chenquincy/vue-dynamic-form-component/issues) .
|
101 |
|
102 | ## License
|
103 |
|
104 | [MIT license](https://tldrlegal.com/license/mit-license)
|
105 |
|