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>
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
举例 |
| formData |
表单数据项 |
object |
- |
- |
见下方 |
| v-model |
绑定值 |
object |
- |
- |
- |
| labelWidth |
表单项label宽度 |
string |
- |
auto |
'100px' |
| span |
布局分栏数(同Element UI) |
number |
1-24 |
24 |
8 |
| disabled |
禁用 |
boolean |
- |
false |
true |
| ref |
Vue组件的ref属性 |
string |
- |
- |
- |
采用键值对形式，其中key为表单项字段，value则为该表单配置项
通用参数
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
举例 |
| type |
表单项类型 |
string |
见下方 |
- |
- |
| label |
标签文本 |
string |
- |
- |
- |
| disabled |
禁用 |
boolean/function/number |
- |
false |
0/true/() => this.disabled |
| show |
控制表单项显隐方法，接受function返回值为布尔类型 |
function |
- |
- |
form => form.type == 1 |
| prompt |
label后面的提示信息 |
object |
- |
title默认为“提示”，width默认为200 |
{title: '提示', content: '提示内容', width: 200} |
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
输入框类
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
举例 |
| type |
表单项类型 |
string |
input/number/integer/textarea |
- |
- |
| placeholder |
输入框类型表单项占位符 |
string/function |
- |
- |
请输入姓名/() => this.placeholder |
| prepend |
type为input/number/integer类型是输入框前置内容，非必须 |
string |
- |
- |
¥ |
| append |
type为input/number/integer类型是输入框后置内容，非必须 |
string |
- |
- |
元 |
| maxlength |
输入框类型表单项最大内容长度 |
number |
- |
无限制 |
200 |
| rows |
type为textarea时的行数 |
number |
- |
4 |
6 |
| min |
type为textarea时的行数最小值 |
number |
- |
- |
- |
带选项类
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
举例 |
| type |
表单项类型 |
string |
select/radio/checkbox |
- |
- |
| placeholder |
type为select时表单项占位符 |
string/function |
- |
- |
请选择性别/() => this.placeholder |
| option |
带选项类表单项的数据项 |
array/object/function |
- |
- |
详见下方 |
| labelKey |
option为数组时，label的对应key |
string |
- |
label |
name |
| valueKey |
option为数组时，value的对应key |
string |
- |
value |
id |
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: []
},
}
}
开关类
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
举例 |
| type |
表单项类型 |
string |
switch |
- |
- |
| activeValue |
switch 打开时的值 |
boolean/string/number |
- |
true |
- |
| inactiveValue |
switch 关闭时的值 |
boolean/string/number |
- |
false |
- |
日期选择器类
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
举例 |
| type |
表单项类型 |
string |
year/month/date/datetime/datetimerange/daterange |
- |
- |
| placeholder |
输入框类型表单项占位符 |
string/function |
- |
- |
请选择日期/() => this.placeholder |
| format |
显示在输入框中的格式 |
string |
- |
yyyy-MM-dd HH:mm:ss |
- |
时间选择器类
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
举例 |
| type |
表单项类型 |
string |
time |
- |
- |
| placeholder |
输入框类型表单项占位符 |
string/function |
- |
- |
请选择日期/() => this.placeholder |
| format |
显示在输入框中的格式 |
string |
- |
HH:mm:ss |
- |
| pickerOptions |
当前时间日期选择器特有的选项参考下表(同Element UI) |
object/function |
- |
- |
- |
动态表单
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
举例 |
| type |
表单项类型 |
string |
dynamicForm |
- |
- |
| labelWidth |
表单项label宽度 |
string |
- |
auto |
'100px' |
| formData |
动态表单项集合（同五、FormData Attributes） |
object |
- |
- |
- |
| max |
动态表单项最大添加数量 |
number |
- |
- |
- |
插槽slot
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
举例 |
| type |
表单项类型 |
string |
slot |
- |
- |
表单验证
| 参数 |
说明 |
类型 |
可选值 |
默认值 |
举例 |
| required |
是否必填 |
boolean |
true/false |
默认都为必填true |
false |
| validator |
自定义验证规则 |
array/function |
- |
- |
同element UI，示例见完整示例 |
| rule |
type为输入框类型时，使用vue-create-form自带的校验规则 |
string |
phone/idNumber/email/link |
- |
- |
表单项事件
// 放在event里，
name: {
type: 'input'
label: '姓名',
// 事件
event: {
change: (e) => {},
blur: (e) => {},
input: (e) => {},
}
}
| 事件名 |
说明 |
举例 |
| validate |
提交验证 |
this.$refs.form.validate(() => { // todo }) |
| resetFields |
重置表单 |
this.$refs.form.resetFields() |
七、完整示例
(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已投入实际生产中，极大的减少前端工程师开发后台管理系统表单的工作量
稳定且可靠，作者长期维护中…