92 lines
2.1 KiB
JavaScript
92 lines
2.1 KiB
JavaScript
/* eslint react/no-multi-comp:0, no-console:0 */
|
|
|
|
import BaseMixin from '../../_util/BaseMixin';
|
|
import createDOMForm from '../src/createDOMForm';
|
|
import { Modal } from 'ant-design-vue';
|
|
import { regionStyle, errorStyle } from './styles';
|
|
|
|
const Form = {
|
|
mixins: [BaseMixin],
|
|
props: {
|
|
form: Object,
|
|
},
|
|
|
|
data() {
|
|
return { visible: false };
|
|
},
|
|
methods: {
|
|
onSubmit(e) {
|
|
e.preventDefault();
|
|
this.form.validateFieldsAndScroll((error, values) => {
|
|
if (!error) {
|
|
console.log('ok', values);
|
|
} else {
|
|
console.log('error', error, values);
|
|
}
|
|
});
|
|
},
|
|
|
|
onCancel() {
|
|
this.setState({ visible: false });
|
|
},
|
|
|
|
open() {
|
|
this.setState({ visible: true });
|
|
},
|
|
},
|
|
|
|
render() {
|
|
const { getFieldProps, getFieldError } = this.form;
|
|
return (
|
|
<div
|
|
style={{
|
|
margin: '20px',
|
|
}}
|
|
>
|
|
<h2>modal</h2>
|
|
<Modal
|
|
visible={this.visible}
|
|
bodyStyle={{
|
|
height: '200px',
|
|
overflow: 'auto',
|
|
}}
|
|
onCancel={this.onCancel}
|
|
title="modal"
|
|
>
|
|
<div ref="dialogContent">
|
|
<form onSubmit={this.onSubmit}>
|
|
<input
|
|
{...getFieldProps('required', { rules: [{ required: true, message: '必填' }] })}
|
|
/>
|
|
<div style={errorStyle}>
|
|
{getFieldError('required') ? (
|
|
getFieldError('required').join(',')
|
|
) : (
|
|
<b
|
|
style={{
|
|
visibility: 'hidden',
|
|
}}
|
|
>
|
|
1
|
|
</b>
|
|
)}
|
|
</div>
|
|
<div
|
|
style={{
|
|
marginTop: '300px',
|
|
}}
|
|
>
|
|
<button>submit</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</Modal>
|
|
<div style={regionStyle}>
|
|
<button onClick={this.open}>open</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
},
|
|
};
|
|
export default createDOMForm()(Form);
|