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

/* 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)