Skip to content

Commit 496c17e

Browse files
chenquincychenquincy
committed
Merge branch 'release/2.4.0'
2 parents 4ba15dd + d8f72d8 commit 496c17e

File tree

13 files changed

+154
-172
lines changed

13 files changed

+154
-172
lines changed

‎CHANGELOG.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,15 @@
22

33
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
44

5+
# [2.4.0](https://github.com/chenquincy/vue-dynamic-form-component/compare/v2.3.3...v2.4.0) (2019-12-30)
6+
7+
8+
### Features
9+
10+
* support to hidden outer layer's error message ([2dc9344](https://github.com/chenquincy/vue-dynamic-form-component/commit/2dc9344))
11+
12+
13+
514
## [2.3.3](https://github.com/chenquincy/vue-dynamic-form-component/compare/v2.3.2...v2.3.3) (2019-10-30)
615

716

‎README.md‎

Lines changed: 75 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,73 @@
22

33
**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.
44

5+
## Usage
6+
7+
``` vue
8+
<template>
9+
<dynamic-form
10+
ref="dynamic-form"
11+
v-model="data"
12+
:descriptors="descriptors">
13+
<template slot="operations">
14+
<el-button @click="reset">reset</el-button>
15+
<el-button type="primary" @click="validate">validate</el-button>
16+
</template>
17+
</dynamic-form>
18+
</template>
19+
20+
<script>
21+
// import and register element-ui first
22+
import DynamicForm from 'vue-dynamic-form-component'
23+
24+
export default {
25+
components: {
26+
DynamicForm
27+
},
28+
data () {
29+
return {
30+
descriptors: {
31+
name: { type: 'string', min: 3, mex: 15, required: true },
32+
homepage: { type: 'url', message: 'The homepage must be an url' },
33+
company: {
34+
type: 'object',
35+
fields: {
36+
name: { type: 'string', required: true },
37+
address: {
38+
type: 'object',
39+
fields: {
40+
province: { type: 'string', required: true },
41+
city: { type: 'string' }
42+
}
43+
}
44+
}
45+
},
46+
children: {
47+
type: 'array',
48+
defaultField: {
49+
type: 'object',
50+
fields:{
51+
name: { type: 'string', min: 3, max: 15, required: true },
52+
age: { type: 'number', min: 1, max: 100, required: true }
53+
}
54+
}
55+
}
56+
},
57+
data: {}
58+
}
59+
},
60+
methods: {
61+
reset () {
62+
this.$refs['dynamic-form'].resetFields()
63+
},
64+
validate () {
65+
this.$refs['dynamic-form'].validate()
66+
}
67+
}
68+
}
69+
</script>
70+
```
71+
572
![vue-dynamic-form-component.gif](https://raw.githubusercontent.com/chenquincy/vue-dynamic-form-component/master/public/vue-dynamic-form-component.gif)
673

774
## Docs
@@ -19,10 +86,15 @@
1986

2087
## Todo
2188

22-
vue-dynamic-form-component can do more. There are a few things that it currently doesn't support but are planned:
89+
**vue-dynamic-form-component** can do more. There are a few things that it currently doesn't support but are planned:
2390

24-
- Support more component
25-
- Custom theme
91+
- [x] Custom component props
92+
- [ ] Custom component event
93+
- [ ] Support more component
94+
- [x] textarea
95+
- [ ] file upload
96+
- [ ] Custom theme
97+
- [ ] Value change event
2698

2799
## Question
28100

‎dev/App.vue‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
v-model="data"
55
ref="dynamic-form"
66
lang="en_US"
7-
:descriptors="descriptors">
7+
:descriptors="descriptors"
8+
:show-outer-error="false">
89
<template slot="operations">
910
<el-button @click="reset">Reset</el-button>
1011
<el-button type="primary" @click="validate" plain>Validate</el-button>

‎dev/descriptor.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default {
2-
string: { type: 'string', required: true, disabled: true, placeholder: 'test', props: { autocomplete: 'on', type: 'textarea', rows: 4 } },
2+
string: { type: 'string', required: true, disabled: true, placeholder: 'textarea placeholder', props: { autocomplete: 'on', type: 'textarea', rows: 4 } },
33
url: { type: 'url', message: 'The url must be an url' },
44
object: {
55
type: 'object',

‎docs/.vuepress/config.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,9 @@ module.exports = {
4444
'sitemap': {
4545
hostname: 'https://vue-dynamic-form.quincychen.cn',
4646
exclude: ['/404.html']
47+
},
48+
'@vuepress/plugin-google-analytics': {
49+
ga: 'UA-145341224-1'
4750
}
4851
}
4952
}

‎docs/api/dynamic-form/README.md‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,16 @@
22

33
## Props
44

5-
| prop | description | type | option values | default | required |
6-
| --------------- | ------------------------------------------------------------ | ------ | ------------------- | ------- | -------- |
7-
| value | form data | object | | | yes |
8-
| lang | language | string | en_US,zh_CN | zh_CN | |
9-
| descriptors | descriptors of form data, refer to [descriptor](/zh/api/descriptors/) | object | | | yes |
10-
| size | size of form component | string | medium,small,mini | small | |
11-
| backgroundColor | root form background color | string | Hex color or 'none' | none | |
12-
| fontSize | font size of form | number | | 14 | |
13-
| bgColorOffset | form background color offset | number | | 8 | |
5+
| prop | description | type | option values | default | required |
6+
| --------------- | ------------------------------------------------------------ | ------- | ------------------- | ------- | -------- |
7+
| value | form data | object | | | yes |
8+
| lang | language | string | en_US,zh_CN | zh_CN | |
9+
| descriptors | descriptors of form data, refer to [descriptor](/zh/api/descriptors/) | object | | | yes |
10+
| size | size of form component | string | medium,small,mini | small | |
11+
| backgroundColor | root form background color | string | Hex color or 'none' | none | |
12+
| fontSize | font size of form | number | | 14 | |
13+
| bgColorOffset | form background color offset | number | | 8 | |
14+
| showOuterError | whether show parent component's error | boolean | | true | |
1415

1516
`languages` format：
1617

‎docs/guide/README.md‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,6 @@
1010
- Support data **validation**
1111
- **Multi-Languages** support
1212

13-
## Todo
14-
15-
vue-dynamic-form-component can do more. There are a few things that it currently doesn't support but are planned:
16-
17-
- Support more component
18-
- Custom theme
19-
- value change event
20-
2113
## Question
2214

2315
Please submit your question in [Github Issue](https://github.com/chenquincy/vue-dynamic-form-component/issues) .

‎docs/zh/api/dynamic-form/README.md‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,16 +2,17 @@
22

33
## 属性
44

5-
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 必传 |
6-
| --------------- | ------------------------------------------------------------ | ------ | ----------------- | ------ | ---- |
7-
| value | 表单数据对象 | object | | | 是 |
8-
| lang | 显示语言 | string | en_US,zh_CN | zh_CN | |
9-
| languages | 自定义语言包 | object | | | |
10-
| descriptors | 表单数据对象的描述器，详见 [descriptor](/zh/api/descriptors/) | object | | | 是 |
11-
| size | 表单组件元素的大小 | string | medium,small,mini | small | |
12-
| backgroundColor | 表单最外层背景 | string | 如：#FFFFFF | none | |
13-
| fontSize | 表单字体大小 | number | | 14 | |
14-
| bgColorOffset | 不同层级表单的背景色偏移量 | number | | 8 | |
5+
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 必传 |
6+
| --------------- | ------------------------------------------------------------ | ------- | ----------------- | ------ | ---- |
7+
| value | 表单数据对象 | object | | | 是 |
8+
| lang | 显示语言 | string | en_US,zh_CN | zh_CN | |
9+
| languages | 自定义语言包 | object | | | |
10+
| descriptors | 表单数据对象的描述器，详见 [descriptor](/zh/api/descriptors/) | object | | | 是 |
11+
| size | 表单组件元素的大小 | string | medium,small,mini | small | |
12+
| backgroundColor | 表单最外层背景 | string | 如：#FFFFFF | none | |
13+
| fontSize | 表单字体大小 | number | | 14 | |
14+
| bgColorOffset | 不同层级表单的背景色偏移量 | number | | 8 | |
15+
| showOuterError | 是否显示父组件的错误信息 | boolean | | true | |
1516

1617
languages格式：
1718

‎docs/zh/guide/README.md‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,6 @@
1414

1515

1616

17-
## Todo
18-
19-
vue-dynamic-form-component还可以做到更多，这里有一些还未支持但是已经在计划中的功能:
20-
21-
- 支持更多组件
22-
- 自定义样式
23-
- 字段值变更事件
24-
25-
26-
2717
## 意见反馈
2818

2919
请通过 [Github Issue](https://github.com/chenquincy/vue-dynamic-form-component/issues) 提交您的意见反馈

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-dynamic-form-component",
3-
"version": "2.3.3",
3+
"version": "2.4.0",
44
"license": "MIT",
55
"author": {
66
"email": "mail@quincychen.cn",
@@ -34,6 +34,7 @@
3434
"@vue/cli-plugin-eslint": "^3.8.0",
3535
"@vue/cli-service": "^3.8.0",
3636
"@vue/eslint-config-standard": "^4.0.0",
37+
"@vuepress/plugin-google-analytics": "^1.2.0",
3738
"babel-eslint": "^10.0.1",
3839
"element-ui": "^2.11.1",
3940
"eslint": "^5.16.0",

0 commit comments

Comments
 (0)