vue-el-form v0.0.1

vue-create-form

超精简代码动态创建Element UI Form表单

代码效果图

一、安装方法：

1. npm安装

npm install vue-create-form

2.yarn安装

yarn add vue-create-form

二、引入方法：

1. 全局引入

// main.js中
import VueCreateForm from 'vue-create-form'
Vue.use(VueCreateForm)

2. 组件内部引入

<script>
  import vueCreateForm from 'vue-create-form'
  export default {
    components: {
      vueCreateForm
    }
  }
</script>

三、简单使用

<template>
  <div>
    <vue-create-form ref='form' v-model='form' :formData="formData"/>
    <div>
      <el-button type='primary' @click='submit'>提交</el-button>
    </div>
  </div>
</template>

<script>
// 若全局引入，此处不需要再引入
import vueCreateForm from 'vue-create-form'
export default {
  components: {
    // 若全局引入，此处不需要再引入
    vueCreateForm
  },
  data () {
    return {
      form: {},
      formData: {
        name: {
          type: 'input',
          label: '姓名'
        }
      }
    }
  },
  methods: {
    // 提交
    submit () {
      this.$refs.form.validate(() => {
        // 校验成功
      })
    }
  }
}
</script>

<style lang='scss' scoped>
</style>

四、VueCreateForm Attributes

五、FormData Attributes

采用键值对形式，其中key为表单项字段，value则为该表单配置项

通用参数

type类型

一、输入框类
1、输入框input
2、数字框number
3、整数框integer
4、文本框textarea

二、带选项类
1、select
2、radio
3、checkbox

三、开关类
1、switch

四、日期选择器类
1、year
2、month
3、date
4、datetime
5、datetimerange
6、daterange

五、时间选择器类
1、time

输入框类

带选项类

option

// 1、object
option: {1: '张三', 2: '李四'}

// 2、标准Array
option: [{label: '张三', value: 1}, {label: '李四', value: 2}]

// 3、非标准Array
option: [{name: '张三', id: 1}, {name: '李四', id: 2}],
labelKey: 'name',
valueKey: 'id'

// 4、function

this.option = {1: '张三', 2: '李四'}

...
option: () => this.option
...

⚠️注意：type为checkbox时，组件v-model绑定的对象中，需声明默认值为[]，即：

<vue-create-form :formData='formData' v-model='form' .../>

...
data () {
  return {
    formData: {
      hobby: {
        type: 'checkbox',
        label: '爱好'
      }
    },
    form: {
      hobby: []
    },

  }
}

开关类

日期选择器类

时间选择器类

动态表单

插槽slot

表单验证

表单项事件

// 放在event里，
name: {
  type: 'input'
  label: '姓名',
  // 事件
  event: {
    change: (e) => {},
    blur: (e) => {},
    input: (e) => {},
  }
}

六、VueCreateForm Events

七、完整示例

(1) 自定义表单验证\ (2) 带选项类动态option\ (3) 绑定事件\ (4) 输入框后置内容\ (5) 控制显隐\ (6) 表单项非必填\ (7) 清空表单\ (8) 提交表单\ (9) 布局分栏\ (10) 使用组件内部校验规则\ (11) 动态表单

<template>
  <div>
    <el-button type='warning' @click="changeOption">点击改变优惠券类型couponTypes</el-button>
    <vue-create-form
      ref='vueCreateForm'
      v-model='form'
      labelWidth='100px'
      :formData="formData"/>
    <el-button type='primary' @click="submit">提交</el-button>
  </div>
</template>

<script>
// 若全局引入，此处不需要再引入
import vueCreateForm from 'vue-create-form'
export default {
  components: {
    // 若全局引入，此处不需要再引入
    vueCreateForm
  },
  data () {
    // (1) 自定义表单验证
    const floatRequireMoney = (rule, value, callback) => {
      if (value) {
        var reg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1})?$/
        if (value < 0 || value > 9.9) {
          return callback(new Error('折扣范围在0~9.9之间'))
        } else if (!reg.test(value)) {
          return callback(new Error('最多保留1位小数'))
        } else {
          callback()
        }
      }
    }
    return {
      // (2) 动态option，changeOption方法触发改变
      couponTypes: {
        1: '抵扣劵',
        2: '折扣劵'
      },
      formData: {
        phone: {
          type: 'input',
          label: '手机号',
          // (10) 使用组件内部校验规则
          rule: 'phone'
        },
        couponName: { 
          type: 'input', 
          label: '优惠券名称',
          // (3) 绑定事件
          event: {
            // (3) 输入框input事件
            input: this.inputCouponName
          },
          // (9) 布局分栏
          span: 12
        },
        // (2) 动态option，请使用Funtion返回参数
        type: {
          type: 'radio',
          label: '优惠券类型',
          option: () => this.couponTypes,
          // (9) 布局分栏
          span: 12
        },
        rate: {
          type: 'number',
          label: '折扣比例',
          placeholder: '请输入折扣比例，如8.5',
          // (1) 自定义表单验证
          validator: floatRequireMoney,
          // (4) 输入框后置内容
          append: '折',
          // (5) 控制显隐
          show: form => form.type === 2
        },
        date: { type: 'datetimerange', label: '有效期' },
        way: {
          type: 'radio',
          label: '投放方式',
          // 静态option
          option: {
            1: '系统主动发放'
            2: '用户自领'
          } 
        },
        instructions: { type: 'textarea', label: '使用说明' },
        // (6) 备注设置非必填
        remark: { type: 'textarea', label: '备注', required: false },
        // (11) 动态表单
        limitList: {
          type: 'dynamicForm',
          label: '使用限制',
          labelWidth: 'auto',
          max: 3,
          formItem: {
            couponType: {
              type: 'select',
              label: '优惠券类型',
              option: {
                1: '抵扣劵',
                2: '折扣劵'
              },
            },
            limit: {
              type: 'integer',
              label: '每次可使用',
              append: '张'
            }
          }
        }
      },
      form: {}
    }
  },
  methods: {
    // (3) 绑定输入框input事件
    inputCouponName (e) {
      console.log(e)
    },
    // (2) 点击改变优惠券类型couponTypes
    changeOption () {
      this.couponTypes = {
        1: '满减券',
        2: '免单券',
        3: '打折券'
      }
    },
    // (7) 清空表单
    clear () {
      this.$refs.vueCreateForm.resetFields()
    },
    // (8) 提交表单
    submit () {
      // 表单验证
      this.$refs.vueCreateForm.validate(() => {
        // todo...
      })
    }
  }
}
</script>

<style lang='scss' scoped>
</style>

作者VX：Nice2cu_Hu，目前Vue-create-form已投入实际生产中，极大的减少前端工程师开发后台管理系统表单的工作量\ 稳定且可靠，作者长期维护中…