Skip to content

Commit d8b578c

Browse files
author
levy
committed
Merge branch 'dev'
2 parents 679c322 + d0d8a71 commit d8b578c

File tree

12 files changed

+288
-27
lines changed

12 files changed

+288
-27
lines changed

.all-contributorsrc

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,17 @@
5555
"doc",
5656
"example"
5757
]
58+
},
59+
{
60+
"login": "colmugx",
61+
"name": "ColMugX",
62+
"avatar_url": "https://avatars1.githubusercontent.com/u/21327913?v=4",
63+
"profile": "https://colmugx.github.io",
64+
"contributions": [
65+
"code",
66+
"test",
67+
"doc"
68+
]
5869
}
5970
],
6071
"contributorsPerLine": 7

README-en.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ In our daily development, there are lots page with form, and usually the form st
3737
## Demo
3838

3939
* [Doc and online demo](https://femessage.github.io/el-form-renderer/)
40+
* [custom component guide](https://github.com/femessage/el-form-renderer/blob/master/docs/guide-custom-component.md)
4041

4142
**[⬆Back to Top](#table-of-contents)**
4243

README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
## Demo
4545

4646
* [doc and online demo](https://femessage.github.io/el-form-renderer/)
47+
* [自定义组件接入指南](https://github.com/femessage/el-form-renderer/blob/master/docs/guide-custom-component.md)
4748

4849
**[⬆ Back to Top](#table-of-contents)**
4950

@@ -94,7 +95,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
9495
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
9596

9697
<!-- prettier-ignore -->
97-
<table><tr><td align="center"><a href="https://github.com/Alvin-Liu"><img src="https://avatars0.githubusercontent.com/u/11909145?v=4" width="100px;" alt="Alvin"/><br /><sub><b>Alvin</b></sub></a><br /><a href="https://github.com/FEMessage/el-form-renderer/commits?author=Alvin-Liu" title="Code">💻</a> <a href="#review-Alvin-Liu" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/FEMessage/el-form-renderer/issues?q=author%3AAlvin-Liu" title="Bug reports">🐛</a> <a href="#blog-Alvin-Liu" title="Blogposts">📝</a> <a href="#ideas-Alvin-Liu" title="Ideas, Planning, & Feedback">🤔</a></td><td align="center"><a href="http://levy.work"><img src="https://avatars3.githubusercontent.com/u/9384365?v=4" width="100px;" alt="levy"/><br /><sub><b>levy</b></sub></a><br /><a href="#review-levy9527" title="Reviewed Pull Requests">👀</a> <a href="#infra-levy9527" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#ideas-levy9527" title="Ideas, Planning, & Feedback">🤔</a></td><td align="center"><a href="https://evila.me"><img src="https://avatars3.githubusercontent.com/u/19513289?v=4" width="100px;" alt="EVILLT"/><br /><sub><b>EVILLT</b></sub></a><br /><a href="https://github.com/FEMessage/el-form-renderer/commits?author=evillt" title="Code">💻</a> <a href="https://github.com/FEMessage/el-form-renderer/issues?q=author%3Aevillt" title="Bug reports">🐛</a> <a href="#blog-evillt" title="Blogposts">📝</a> <a href="#ideas-evillt" title="Ideas, Planning, & Feedback">🤔</a></td><td align="center"><a href="https://donaldshen.github.io/portfolio"><img src="https://avatars3.githubusercontent.com/u/19591950?v=4" width="100px;" alt="Donald Shen"/><br /><sub><b>Donald Shen</b></sub></a><br /><a href="https://github.com/FEMessage/el-form-renderer/commits?author=donaldshen" title="Documentation">📖</a> <a href="#example-donaldshen" title="Examples">💡</a></td></tr></table>
98+
<table><tr><td align="center"><a href="https://github.com/Alvin-Liu"><img src="https://avatars0.githubusercontent.com/u/11909145?v=4" width="100px;" alt="Alvin"/><br /><sub><b>Alvin</b></sub></a><br /><a href="https://github.com/FEMessage/el-form-renderer/commits?author=Alvin-Liu" title="Code">💻</a> <a href="#review-Alvin-Liu" title="Reviewed Pull Requests">👀</a> <a href="https://github.com/FEMessage/el-form-renderer/issues?q=author%3AAlvin-Liu" title="Bug reports">🐛</a> <a href="#blog-Alvin-Liu" title="Blogposts">📝</a> <a href="#ideas-Alvin-Liu" title="Ideas, Planning, & Feedback">🤔</a></td><td align="center"><a href="http://levy.work"><img src="https://avatars3.githubusercontent.com/u/9384365?v=4" width="100px;" alt="levy"/><br /><sub><b>levy</b></sub></a><br /><a href="#review-levy9527" title="Reviewed Pull Requests">👀</a> <a href="#infra-levy9527" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="#ideas-levy9527" title="Ideas, Planning, & Feedback">🤔</a></td><td align="center"><a href="https://evila.me"><img src="https://avatars3.githubusercontent.com/u/19513289?v=4" width="100px;" alt="EVILLT"/><br /><sub><b>EVILLT</b></sub></a><br /><a href="https://github.com/FEMessage/el-form-renderer/commits?author=evillt" title="Code">💻</a> <a href="https://github.com/FEMessage/el-form-renderer/issues?q=author%3Aevillt" title="Bug reports">🐛</a> <a href="#blog-evillt" title="Blogposts">📝</a> <a href="#ideas-evillt" title="Ideas, Planning, & Feedback">🤔</a></td><td align="center"><a href="https://donaldshen.github.io/portfolio"><img src="https://avatars3.githubusercontent.com/u/19591950?v=4" width="100px;" alt="Donald Shen"/><br /><sub><b>Donald Shen</b></sub></a><br /><a href="https://github.com/FEMessage/el-form-renderer/commits?author=donaldshen" title="Documentation">📖</a> <a href="#example-donaldshen" title="Examples">💡</a></td><td align="center"><a href="https://colmugx.github.io"><img src="https://avatars1.githubusercontent.com/u/21327913?v=4" width="100px;" alt="ColMugX"/><br /><sub><b>ColMugX</b></sub></a><br /><a href="https://github.com/FEMessage/el-form-renderer/commits?author=colmugx" title="Code">💻</a> <a href="https://github.com/FEMessage/el-form-renderer/commits?author=colmugx" title="Tests">⚠️</a> <a href="https://github.com/FEMessage/el-form-renderer/commits?author=colmugx" title="Documentation">📖</a></td></tr></table>
9899

99100
<!-- ALL-CONTRIBUTORS-LIST:END -->
100101

docs/guide-custom-component.md

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
# 自定义组件接入指南
2+
3+
## 前言
4+
5+
[el-form-renderer](https://github.com/femessage/el-form-renderer)`type` 有限, 默认只能渲染普通的表单项, 假如现在要渲染一个上传组件, `type` 就不够用了, 那怎么办呢? 这时候 component 选项就派上用场了
6+
7+
本文将介绍如何开发符合 [el-form-renderer](https://github.com/femessage/el-form-renderer) 接入标准的自定义组件, 实现对自定义组件的渲染
8+
9+
## 接入标准
10+
11+
自定义组件接入的关键是在组件内部实现 v-model
12+
13+
[el-form-renderer](https://github.com/femessage/el-form-renderer) 对 v-model 的要求是:
14+
15+
- 有一个 props 为 value
16+
- 对外触发 input 事件
17+
18+
下面是一个简单的例子
19+
20+
```html
21+
<!-- 自定义组件 my-input -->
22+
<input :value="value" @input="onInput">
23+
24+
<script>
25+
export default {
26+
props: {
27+
value: String
28+
},
29+
methods: {
30+
onInput(val) {
31+
this.$emit('input', 'my-input: ' + val)
32+
}
33+
}
34+
}
35+
</script>
36+
```
37+
38+
则可以用 component 属性让 [el-form-renderer](https://github.com/femessage/el-form-renderer) 渲染此自定义组件
39+
40+
```html
41+
<template>
42+
<el-form-renderer :content="content"/>
43+
</template>
44+
45+
<script>
46+
import MyInput from '@/components/my-input.vue'
47+
export default {
48+
data() {
49+
return {
50+
content: [
51+
{
52+
component: MyInput,
53+
id: 'myInput',
54+
label: 'label'
55+
}
56+
]
57+
}
58+
},
59+
}
60+
</script>
61+
```
62+
63+
## 实际案例
64+
65+
目前团队对常见的表单扩展组件都按 [el-form-renderer](https://github.com/femessage/el-form-renderer) 的标准实现了 v-model, 因此都可以不写 template, 由 [el-form-renderer](https://github.com/femessage/el-form-renderer) 实现数据驱动渲染
66+
67+
- 上传组件 [https://github.com/FEMessage/upload-to-ali](https://github.com/FEMessage/upload-to-ali)
68+
- 富文本编辑器 [https://github.com/FEMessage/v-editor](https://github.com/FEMessage/v-editor)
69+
- 省市区选择器 [https://github.com/FEMessage/el-select-area](https://github.com/FEMessage/el-select-area)
70+
- 范围输入框 [https://github.com/FEMessage/el-number-range](https://github.com/FEMessage/el-number-range)
71+
- 版本号输入框 [https://github.com/FEMessage/el-semver-input](https://github.com/FEMessage/el-semver-input)
72+
73+
## 拓展阅读
74+
75+
- [v-model基础](https://cn.vuejs.org/v2/guide/forms.html#%E5%9F%BA%E7%A1%80%E7%94%A8%E6%B3%95)
76+
- [在组件上使用v-model](https://cn.vuejs.org/v2/guide/components.html#%E5%9C%A8%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-v-model)

docs/hidden.md

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
可以对表单项进行隐藏
2+
3+
```vue
4+
<template>
5+
<el-form-renderer ref="form" :content="content" />
6+
</template>
7+
8+
<script>
9+
export default {
10+
name: 'at-change',
11+
data() {
12+
return {
13+
content: [
14+
{
15+
type: 'select',
16+
id: 'hobby',
17+
label: '爱好',
18+
options: [
19+
{
20+
label: '足球',
21+
value: 'football'
22+
},
23+
{
24+
label: '篮球',
25+
value: 'basketball'
26+
}
27+
]
28+
},
29+
{
30+
label: '原因',
31+
type: 'input',
32+
id: 'reason',
33+
el: {
34+
placeholder: '喜欢的原因?'
35+
}
36+
},
37+
{
38+
label: '偶像',
39+
type: 'input',
40+
id: 'idol',
41+
el: {
42+
placeholder: '您最喜欢的篮球明星?'
43+
},
44+
hidden: form => form.hobby !== 'basketball' // 通过 hidden 控制显示状态
45+
},
46+
]
47+
}
48+
}
49+
}
50+
</script>
51+
```

src/el-form-renderer.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,12 +51,20 @@ interface Content {
5151
default?: any // 默认值,可选
5252

5353
/**
54+
* @deprecated
55+
*
5456
* 传入一个对象,key为属性路径,value为指定值,校验通过则显示该表单项
5557
* 比如当前表单项值为{a: {b: 1}},enableWhen={'a.b': 1}, 则校验通过
5658
* 也可以只传入属性路径,此时该属性非空就通过校验
5759
*/
5860
enableWhen?: object | string
5961

62+
/**
63+
* 传入一个方法,并返回 boolean,返回 true 时则隐藏该表单项
64+
* form 为当前 form 的值,item 为当前表单项的定义
65+
*/
66+
hidden?: (form: Object, item: Content) => boolean
67+
6068
/**
6169
* 具有选择功能的原子表单可用此定义可选项
6270
* 例如: select, radio-group, radio-button, checkbox-group, checkbox-button

src/mixins/hidden.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export default {
2+
methods: {
3+
/**
4+
* 处理 hidden
5+
*
6+
*/
7+
getHiddenStatus(hidden = this.data && this.data.hidden) {
8+
if (hidden) {
9+
const newData = {...this.data}
10+
delete newData.hidden
11+
12+
// 给 hidden 方法传递 form 值与当前 item 信息
13+
return hidden(this.value, newData)
14+
}
15+
}
16+
}
17+
}

src/render-form-item.js

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import mixinOptionExtensions from './mixin-package-option'
2-
import mixinEnableWhen from './mixin-enable-when'
1+
import mixinOptionExtensions from './mixins/package-option'
2+
import mixinEnableWhen from './mixins/enable-when'
3+
import mixinHidden from './mixins/hidden'
34
import {toCamelCase, isObject} from './utils'
45

56
function validator(data) {
@@ -13,7 +14,7 @@ function validator(data) {
1314
}
1415

1516
export default {
16-
mixins: [mixinOptionExtensions, mixinEnableWhen],
17+
mixins: [mixinOptionExtensions, mixinEnableWhen, mixinHidden],
1718
props: {
1819
data: Object,
1920
prop: {
@@ -30,7 +31,9 @@ export default {
3031
computed: {
3132
// 是否显示
3233
_show() {
33-
return this.getEnableWhenSatatus()
34+
// 当存在 hidden 时优先响应
35+
const isHidden = this.getHiddenStatus()
36+
return isHidden !== undefined ? !isHidden : this.getEnableWhenSatatus()
3437
}
3538
},
3639
render(h) {

0 commit comments

Comments
 (0)