ant-design-vue/components/vc-form/demo/modal.js

85 lines
1.9 KiB
JavaScript

/* eslint react/no-multi-comp:0, no-console:0 */
import BaseMixin from '../../_util/BaseMixin'
import createDOMForm from '../src/createDOMForm'
import { Modal } from 'vue-antd-ui'
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)