Skip to content

Commit b89c002

Browse files
tangjinzhoutangjinzhou
committed
feat: add form demo
1 parent 0028a10 commit b89c002

File tree

6 files changed

+258
-28
lines changed

6 files changed

+258
-28
lines changed

‎components/checkbox/Checkbox.jsx

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
2-
import hasProp from '../_util/props-util'
1+
import classNames from 'classnames'
2+
import hasProp, { getClass, getStyle } from '../_util/props-util'
33
import PropTypes from '../_util/vue-types'
44
export default {
5+
inheritAttrs: false,
56
name: 'ACheckbox',
67
props: {
78
prefixCls: {
@@ -104,9 +105,13 @@ export default {
104105
onChange = () => checkboxGroupContext.toggleOption({ value: props.value })
105106
disabled = props.disabled || checkboxGroupContext.disabled
106107
}
108+
const classString = classNames(getClass(this), {
109+
[`${prefixCls}-wrapper`]: true,
110+
})
107111
return (
108112
<label
109-
class={`${prefixCls}-wrapper`}
113+
class={classString}
114+
style={getStyle(this)}
110115
onMouseenter={this.onMouseEnter}
111116
onMouseleave={this.onMouseLeave}
112117
>

‎components/form/FormItem.jsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -117,8 +117,8 @@ export default {
117117
return this.getChildAttr(FIELD_DATA_PROP)
118118
},
119119

120-
onHelpAnimEnd (_key, helpShow) {
121-
this.setState({ helpShow })
120+
onHelpAnimEnd () {
121+
this.setState({ helpShow: false })
122122
},
123123

124124
renderHelp () {
@@ -132,6 +132,9 @@ export default {
132132
const transitionProps = getTransitionProps('show-help', {
133133
afterLeave: this.onHelpAnimEnd,
134134
})
135+
if (children) {
136+
this.setState({ helpShow: true })
137+
}
135138
return (
136139
<transition
137140
{...transitionProps}
@@ -286,7 +289,7 @@ export default {
286289
return label ? (
287290
<Col {...colProps} >
288291
<label
289-
htmlFor={id || this.getId()}
292+
for={id || this.getId()}
290293
class={labelClassName}
291294
title={typeof label === 'string' ? label : ''}
292295
onClick={this.onLabelClick}

‎components/form/demo/advanced-search.md

Lines changed: 134 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,134 @@
1+
<cn>
2+
#### 高级搜索
3+
三列栅格式的表单排列方式，常用于数据表格的高级搜索。
4+
有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。
5+
</cn>
6+
7+
<us>
8+
#### Advanced search
9+
Three columns layout is often used for advanced searching of data table.
10+
Because the width of label is not fixed, you may need to adjust it by customizing its style.
11+
</us>
12+
13+
```html
14+
<script>
15+
import { Form } from 'vue-antd-ui'
16+
17+
const AdvancedSearchForm = {
18+
data () {
19+
return {
20+
expand: false,
21+
}
22+
},
23+
methods: {
24+
handleSearch (e) {
25+
e.preventDefault()
26+
this.form.validateFields((error, values) => {
27+
console.log('error', error)
28+
console.log('Received values of form: ', values)
29+
})
30+
},
31+
32+
handleReset () {
33+
this.form.resetFields()
34+
},
35+
36+
toggle () {
37+
this.expand = !this.expand
38+
},
39+
40+
// To generate mock Form.Item
41+
getFields () {
42+
const count = this.expand ? 10 : 6
43+
const { getFieldDecorator } = this.form
44+
const children = []
45+
for (let i = 0; i < 10; i++) {
46+
children.push(
47+
<a-col span={8} key={i} style={{ display: i < count ? 'block' : 'none' }}>
48+
<a-form-item label={`Field ${i}`}>
49+
{getFieldDecorator(`field-${i}`, {
50+
rules: [{
51+
required: true,
52+
message: 'Input something!',
53+
}],
54+
})(
55+
<a-input placeholder='placeholder' />
56+
)}
57+
</a-form-item>
58+
</a-col>
59+
)
60+
}
61+
return children
62+
},
63+
},
64+
65+
render () {
66+
return (
67+
<a-form
68+
class='ant-advanced-search-form'
69+
onSubmit={this.handleSearch}
70+
>
71+
<a-row gutter={24}>{this.getFields()}</a-row>
72+
<a-row>
73+
<a-col span={24} style={{ textAlign: 'right' }}>
74+
<a-button type='primary' htmlType='submit'>Search</a-button>
75+
<a-button style={{ marginLeft: '8px' }} onClick={this.handleReset}>
76+
Clear
77+
</a-button>
78+
<a style={{ marginLeft: '8px', fontSize: '12px' }} onClick={this.toggle}>
79+
Collapse <a-icon type={this.expand ? 'up' : 'down'} />
80+
</a>
81+
</a-col>
82+
</a-row>
83+
</a-form>
84+
)
85+
},
86+
}
87+
88+
const WrappedAdvancedSearchForm = Form.create()(AdvancedSearchForm)
89+
90+
export default {
91+
render () {
92+
return (
93+
<div id='components-form-demo-advanced-search'>
94+
<WrappedAdvancedSearchForm />
95+
<div class='search-result-list'>Search Result List</div>
96+
</div>
97+
)
98+
},
99+
}
100+
101+
</script>
102+
<style>
103+
.ant-advanced-search-form {
104+
padding: 24px;
105+
background: #fbfbfb;
106+
border: 1px solid #d9d9d9;
107+
border-radius: 6px;
108+
}
109+
110+
.ant-advanced-search-form .ant-form-item {
111+
display: flex;
112+
}
113+
114+
.ant-advanced-search-form .ant-form-item-control-wrapper {
115+
flex: 1;
116+
}
117+
118+
#components-form-demo-advanced-search .ant-form {
119+
max-width: none;
120+
}
121+
#components-form-demo-advanced-search .search-result-list {
122+
margin-top: 16px;
123+
border: 1px dashed #e9e9e9;
124+
border-radius: 6px;
125+
background-color: #fafafa;
126+
min-height: 200px;
127+
text-align: center;
128+
padding-top: 80px;
129+
}
130+
</style>
131+
```
132+
133+
134+

‎components/form/demo/normal-login.md

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<cn>
2+
#### 登录框
3+
普通的登录框，可以容纳更多的元素。
4+
</cn>
5+
6+
<us>
7+
#### Login Form
8+
Normal login form which can contain more elements.
9+
</us>
10+
11+
```html
12+
<script>
13+
import { Form } from 'vue-antd-ui'
14+
15+
const NormalLoginForm = {
16+
methods: {
17+
handleSubmit (e) {
18+
e.preventDefault()
19+
this.form.validateFields((err, values) => {
20+
if (!err) {
21+
console.log('Received values of form: ', values)
22+
}
23+
})
24+
},
25+
},
26+
27+
render () {
28+
const { getFieldDecorator } = this.form
29+
return (
30+
<a-form id='components-form-demo-normal-login' onSubmit={this.handleSubmit} class='login-form'>
31+
<a-form-item>
32+
{getFieldDecorator('userName', {
33+
rules: [{ required: true, message: 'Please input your username!' }],
34+
})(
35+
<a-input prefix={<a-icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder='Username' />
36+
)}
37+
</a-form-item>
38+
<a-form-item>
39+
{getFieldDecorator('password', {
40+
rules: [{ required: true, message: 'Please input your Password!' }],
41+
})(
42+
<a-input prefix={<a-icon type='lock' style={{ color: 'rgba(0,0,0,.25)' }} />} type='password' placeholder='Password' />
43+
)}
44+
</a-form-item>
45+
<a-form-item>
46+
{getFieldDecorator('remember', {
47+
valuePropName: 'checked',
48+
initialValue: true,
49+
})(
50+
<a-checkbox>Remember me</a-checkbox>
51+
)}
52+
<a class='login-form-forgot' href=''>Forgot password</a>
53+
<a-button type='primary' htmlType='submit' class='login-form-button'>
54+
Log in
55+
</a-button>
56+
Or <a href=''>register now!</a>
57+
</a-form-item>
58+
</a-form>
59+
)
60+
},
61+
}
62+
63+
export default Form.create()(NormalLoginForm)
64+
</script>
65+
<style>
66+
#components-form-demo-normal-login .login-form {
67+
max-width: 300px;
68+
}
69+
#components-form-demo-normal-login .login-form-forgot {
70+
float: right;
71+
}
72+
#components-form-demo-normal-login .login-form-button {
73+
width: 100%;
74+
}
75+
</style>
76+
```
77+
78+
79+

‎components/form/demo/test.vue

Lines changed: 14 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
<script>
2-
import { Form, Icon, Input, Button, Checkbox } from 'antd'
3-
const FormItem = Form.Item
2+
import { Form } from 'vue-antd-ui'
43
54
const NormalLoginForm = {
65
methods: {
@@ -17,35 +16,35 @@ const NormalLoginForm = {
1716
render () {
1817
const { getFieldDecorator } = this.form
1918
return (
20-
<Form id='components-form-demo-normal-login' onSubmit={this.handleSubmit} class='login-form'>
21-
<FormItem>
19+
<a-form id='components-form-demo-normal-login' onSubmit={this.handleSubmit} class='login-form'>
20+
<a-form-item>
2221
{getFieldDecorator('userName', {
2322
rules: [{ required: true, message: 'Please input your username!' }],
2423
})(
25-
<Input prefix={<Icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder='Username' />
24+
<a-input prefix={<a-icon type='user' style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder='Username' />
2625
)}
27-
</FormItem>
28-
<FormItem>
26+
</a-form-item>
27+
<a-form-item>
2928
{getFieldDecorator('password', {
3029
rules: [{ required: true, message: 'Please input your Password!' }],
3130
})(
32-
<Input prefix={<Icon type='lock' style={{ color: 'rgba(0,0,0,.25)' }} />} type='password' placeholder='Password' />
31+
<a-input prefix={<a-icon type='lock' style={{ color: 'rgba(0,0,0,.25)' }} />} type='password' placeholder='Password' />
3332
)}
34-
</FormItem>
35-
<FormItem>
33+
</a-form-item>
34+
<a-form-item>
3635
{getFieldDecorator('remember', {
3736
valuePropName: 'checked',
3837
initialValue: true,
3938
})(
40-
<Checkbox>Remember me</Checkbox>
39+
<a-checkbox>Remember me</a-checkbox>
4140
)}
4241
<a class='login-form-forgot' href=''>Forgot password</a>
43-
<Button type='primary' htmlType='submit' class='login-form-button'>
42+
<a-button type='primary' htmlType='submit' class='login-form-button'>
4443
Log in
45-
</Button>
44+
</a-button>
4645
Or <a href=''>register now!</a>
47-
</FormItem>
48-
</Form>
46+
</a-form-item>
47+
</a-form>
4948
)
5049
},
5150
}

‎components/input/Input.jsx

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
1+
import classNames from 'classnames'
22
import TextArea from './TextArea'
33
import omit from 'omit.js'
44
import inputProps from './inputProps'
5-
import { hasProp, getComponentFromProp } from '../_util/props-util'
5+
import { hasProp, getComponentFromProp, getStyle, getClass } from '../_util/props-util'
66

77
function fixControlledValue (value) {
88
if (typeof value === 'undefined' || value === null) {
@@ -12,6 +12,7 @@ function fixControlledValue (value) {
1212
}
1313

1414
export default {
15+
inheritAttrs: false,
1516
name: 'AInput',
1617
props: {
1718
...inputProps,
@@ -96,10 +97,15 @@ export default {
9697
[wrapperClassName]: (addonBefore || addonAfter),
9798
}
9899

100+
const groupClassName = classNames(`${props.prefixCls}-group-wrapper`, {
101+
[`${props.prefixCls}-group-wrapper-sm`]: props.size === 'small',
102+
[`${props.prefixCls}-group-wrapper-lg`]: props.size === 'large',
103+
})
99104
if (addonBefore || addonAfter) {
100105
return (
101106
<span
102-
class={`${props.prefixCls}-group-wrapper`}
107+
class={groupClassName}
108+
style={getStyle(this)}
103109
>
104110
<span class={className}>
105111
{addonBefore}
@@ -118,7 +124,7 @@ export default {
118124
)
119125
},
120126
renderLabeledIcon (children) {
121-
const { prefixCls } = this.$props
127+
const { prefixCls, size } = this.$props
122128
let prefix = getComponentFromProp(this, 'prefix')
123129
let suffix = getComponentFromProp(this, 'suffix')
124130
if (!prefix && !suffix) {
@@ -136,10 +142,14 @@ export default {
136142
{suffix}
137143
</span>
138144
) : null
139-
145+
const affixWrapperCls = classNames(getClass(this), `${prefixCls}-affix-wrapper`, {
146+
[`${prefixCls}-affix-wrapper-sm`]: size === 'small',
147+
[`${prefixCls}-affix-wrapper-lg`]: size === 'large',
148+
})
140149
return (
141150
<span
142-
class={`${prefixCls}-affix-wrapper`}
151+
class={affixWrapperCls}
152+
style={getStyle(this)}
143153
>
144154
{prefix}
145155
{children}
@@ -167,7 +177,7 @@ export default {
167177
keydown: handleKeyDown,
168178
input: handleChange,
169179
},
170-
class: getInputClassName(),
180+
class: classNames(getInputClassName(), getClass(this)),
171181
ref: 'input',
172182
}
173183
return this.renderLabeledIcon(

0 commit comments

Comments
 (0)