zandko / lucifer-form-generate

参数简介

formData 表单数据

const formData = {
  input: '',
  select: '',
  rate: 5,
  date: ''
}

options 表单 JSON

const options = {
  ref: 'form',          // Form Ref
  formProps: {},        // Form Props
  formItem: [           // 组件 JSON
    {
      label: 'Label',
      key: 'input',     // 对应 formData
      type: 'ElInput' | 'ElColorPicker' | 'ElCascader' | 'ElCheckbox' | 'ElCheckboxGroup' | 'ElRadio' | 'ElRadioGroup' | 'ElDatePicker' | 'ElDateTimePicker' | 'ElTimePicker' | 'ElInputNumber' | 'ElUpload' | 'ElRate' | 'ElSelect' | 'ElSlider' | 'ElSwitch', // 可选组件
      props: {},        // 组件 Props
      events: {},       // 事件
      rules: {
        required: true, // 是否必填
        message: '',    // error 信息
        trigger: 'blur',// 触发条件
        validator(rule, value, callback) {
          if (value === '') {
            callback(new Error('请输入手机号'))
          } else if (value.length !== 11) {
            callback(new Error('请输入正确的手机号'))
          } else {
            callback()
          }
        }
      },        // 校验
    }
  ],
  submit: {
    ref: 'form',   // Ref 与 options.ref 对应
    text: '提交',   // 按钮文案
    reset: {       // 重置按钮 （不是必填）
      text: '重置', // 按钮文案
      props: {}    // 按钮 Props
    },
    props: {},     // 按钮 Props
    success(formData) {
      console.log('验证通过！')
    },
    fail() {
      console.log('校验不通过！')
    }
  }
}