86 lines
1.5 KiB
JavaScript
86 lines
1.5 KiB
JavaScript
/* eslint react/no-multi-comp:0, no-console:0 */
|
|
|
|
import { createForm } from '../index'
|
|
import { regionStyle } from './styles'
|
|
import { Switch } from 'ant-design-vue'
|
|
|
|
const TopForm = {
|
|
props: {
|
|
form: Object,
|
|
},
|
|
render () {
|
|
const { getFieldProps } = this.form
|
|
return (
|
|
<div style={regionStyle}>
|
|
<div>has email?
|
|
</div>
|
|
<div>
|
|
<Switch
|
|
{...getFieldProps('on', { initialValue: true, valuePropName: 'checked' })}/>
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
|
|
const BottomForm = {
|
|
props: {
|
|
form: Object,
|
|
on: Boolean,
|
|
},
|
|
render () {
|
|
const { form } = this
|
|
const on = form.getFieldValue('on')
|
|
const style = {
|
|
...regionStyle,
|
|
display: on ? 'block' : 'none',
|
|
}
|
|
return (
|
|
<div style={style}>
|
|
<div>email:</div>
|
|
<div>
|
|
<input {...form.getFieldProps('email', { rules: [{ type: 'email' }], hidden: !on })}/>
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
|
|
const Form = {
|
|
props: {
|
|
form: Object,
|
|
},
|
|
methods: {
|
|
onSubmit (e) {
|
|
e.preventDefault()
|
|
console.log(this.form.getFieldsValue())
|
|
},
|
|
},
|
|
|
|
render () {
|
|
const { form } = this
|
|
return (
|
|
<div>
|
|
<TopForm form={form}/>
|
|
<BottomForm form={form}/>
|
|
<div style={regionStyle}>
|
|
<button onClick={this.onSubmit}>submit</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
}
|
|
|
|
const NewForm = createForm()(Form)
|
|
|
|
export default {
|
|
render () {
|
|
return (
|
|
<div>
|
|
<h2>parallel form</h2>
|
|
<NewForm/>
|
|
</div>
|
|
)
|
|
},
|
|
}
|