让 iview 和 element-ui 的 form 使用起来更加简单。
demo
<script src="//cdn.jsdelivr.net/npm/iview-form@1.0.12/lib/iview-form.js"></script>
<template>
<iViewForm @submit="onSubmit" :formList="formList"></iViewForm>
</template>
<script>
import iViewForm from 'iview-form'
export default {
components: {
iViewForm
},
data() {
return {
formList: [
{
title: '姓名',
type: 'input',
key: 'name'
}
]
}
},
methods: {
onSubmit(form, valid) {
console.log(form, valid)
}
}
}
</script>
标签大小写随你心情
<iview-form @submit="onSubmit" :formList="formList"></iview-form>
使用 element-ui 组件库
<iview-form lib="element" @submit="onSubmit" :formList="formList"></iview-form>
如果你是 script 标签引入的,那么所有的参数要用小写,并且单词用 - 链接。
iViewForm => iview-form
formList => form-list
参数 |
说明 |
类型 |
默认值 |
grid |
网格,更多请看 demo |
Number |
- |
gutter |
当使用了 grid 属性时,设置此属性可以调整间距 |
Number, Array |
- |
formList |
配置项(看下面 formList 参数) |
Array |
[] |
notCtrl |
是否不显示 提交、重置 按钮 |
Boolean |
false |
enterSubmit |
如果设定这个值为 true,那么 input 按 enter 键会触发 submit 事件 |
Boolean |
false |
lib |
可选值('iview', 'element'),如果指定为 element 那么组件会按照 element 来渲染 |
String |
'iview' |
label-width |
标签的宽度 |
Number |
100 |
content-width |
内容的宽度(支持 百分比 auto) |
Number, String |
240 |
options |
iView 和 element-ui 原生 props ( :options="{size: 'small'}" ) |
Object |
{} |
submitText |
提交按钮文本 |
String |
'提交' |
resetText |
重置按钮文本 |
String |
'重置' |
hasSubmitBtn |
是否显示提交按钮 |
Boolean |
true |
hasResetBtn |
是否显示重置按钮 |
Boolean |
true |
clearable |
控制是否显示清除 icon |
Boolean |
true |
maxlength |
默认全局 input 的 maxlength |
Number |
20 |
textareaMaxlength |
默认全局 textarea 的 maxlength |
Number |
256 |
readonly |
如果设定这个值为 true,那么该表单下所有的表单元素都会是 read |
|
|
disabled |
如果设定这个值为 true,那么该表单下所有的表单元素都会被禁用 |
Boolean |
false |
参数 |
说明 |
类型 |
默认值 |
title |
显示的标签 |
String |
'' |
type |
不同的类型默认值不同,具体看下面 type 的种类 |
String |
'' |
key |
可以监听 submit 事件,返回的 form 里面的 key 就是你定义的 key |
String |
'' |
defaultValue |
item 的默认值 |
- |
- |
isShow |
isShow 为 false 会不显示这个元素 |
Boolean,Function |
(form, item) |
props |
组件库自带的参数,可以参考 iview 或者 element 组件库的文档 |
Object |
{} |
attrs |
组件库自带的参数,可以参考 iview 或者 element 组件库的文档 |
Object |
{} |
text |
type 为 checkbox 或者 radio 时才有用,显示后面跟着的文字 |
String |
'' |
options |
type 为 select、checkbox-group、radio-group、cascader 时才有用,由 {value: 0, text: '苹果'} 组成,数据项支持异步 |
Array |
[] |
onInput |
监听参数改变事件 |
Function |
(value, item, form) |
render |
自定义整行 |
Function |
(h, item, form) |
renderTitle |
自定义标签 |
Function |
(h, item, form) |
renderContent |
自定义内容主题 |
Function |
(h, item, form) |
renderOption |
type 为 select 时才有用,可以自定义 select 的 option |
Function |
(h, option, item) |
disabled |
禁用表单元素,优先级比标签上的低 |
Boolean |
false |
settings |
formItem 的标签属性,比如 style,class |
Object |
{} |
border |
当组件库为 element 时,type:radio-group checkbox checkbox-group, 可以让选项有 border |
Boolean |
false |
on |
当前 content 的 on 配置项, 如果要监听 input 事件 请使用 onInput |
Object |
{} |
nativeOn |
当前 content 的 nativeOn 配置项 |
Object |
{} |
类型 |
默认值 |
其它 |
input |
'' |
默认 maxlength: 20, textarea: 256 |
input-number |
0 |
默认 min: 0, max: 9999999 |
select |
null |
|
checkbox |
false |
|
checkbox-group |
[] |
|
radio |
false |
没有意义,不建议使用 |
radio-group |
[] |
|
date |
当前时间,new Date() |
|
datetime |
当前时间,new Date() |
|
daterange |
['', ''] |
|
datetimerange |
['', ''] |
|
time |
'' |
|
switch |
false |
|
slider |
0 |
|
cascader |
[] |
|
名称 |
说明 |
参数 |
返回值 |
clear |
清除表单验证(暂时只支持element-ui) |
- |
- |
reset |
还原表单(默认会调用 clear) |
- |
- |
getFormBykey |
根据 key 来获取这个 key 在 form 的值 |
{ key: value, ... } |
- |
getForm |
获取 form 的值 |
- |
{ key: value, ... } |
setForm |
设置 form 的值 |
{ key: value, ... } |
- |
submit |
手动触发 submit 事件 |
- |
- |
validateField |
对部分表单字段进行校验的方法。仅当 lib 为 element 的时候,支持第一个参数是数组 |
(props: array or string, callback: Function(errorMessage: string) |
- |
名称 |
说明 |
返回类型 |
返回值 |
submit |
提交按钮的点击事件 |
Object |
(form, valid) |
- 添加 validateField,单项表单验证
- 修复 clear 清空表单无法清空的 bug
- 修复样式错误的 bug
- 修复 renderTitle 和 render 函数没有 form 的bug
- 修复在父组件使用 render(render,renderTitle,renderContent)时,设置 ref 会获取不到对象
- 添加 clear 清除方法
- 支持每个组件的 on 与 nativeOn 配置
- 当组件库为 element 时,type:radio-group checkbox checkbox-group 支持 border 属性
- 删除 readonly,因为只能作用于几种类型(input, select),作用不大
- 添加 cascader 类型,跟 select 的用法类似 [{ value: 'xxx', text: 'xxx' }, ...]
- 删除不必要的提示
- 添加标签的 gutter 属性
- content-width 支持 auto 100% 值
- 修改 1.1.3 失效问题
- 添加 item 的 setting 属性,可以在 formItem 上添加样式了
- 添加全局和单体 readonly 属性
- 添加 type: time 类型
- 修改 reset 方法不能清空验证
- 添加 type: input-number 类型
- 添加 maxlength 和 textareaMaxlength 属性,分别作用于 input 和 textarea 上,默认值分别是 20 、256
- 添加 setForm 方法
- 修改 datetimerange 的默认宽度为 360
- 修改 textarea 如果设置了 enterSubmit,不再触发 submit 事件
- 修改 element-ui 的 placeholder 现在可以写在 props 里
- 可以在网页里面用 script 标签引入啦!
- 修复 options、submitText、resetText、hasSubmitBtn、hasResetBtn 失效的原因
- isShow 属性,可以使用方法了
- 添加 clearable 属性,默认为 true
- 添加 isShow 属性
- 修改 tpye 为 switch 时 props 不生效
- 修改 input 的 placeholder 需要添加在 attrs 里面
- 添加 formList 的 render 函数
- 修改 重置按钮 跟 提交按钮重复的问题
- 添加 options 自定义组建自带 props 属性
- 添加 hasSubmitBtn、hasResetBtn 自定义是否显示按钮属性
- 添加 submitText、resetText 自定义按钮文本属性
- 删除 autocomplete 属性
MIT