createform用法_GitHub - fengzhongye/form-create: 使用ivew动态创建form表单/use iview create form...

form-create

使用iview动态创建form表单

具有数据收集、校验和提交功能的表单生成器，包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能。

1.1版本重大更新

内部重构

新增 省市区三级联动组件

新增 组件事件扩展

优化 文件上传,时间选择等组件

待完善

动态显示隐藏表单

动态增加表单

树形控件生成

示例

安装

npm install form-create

OR

git clone https://github.com/xaboy/form-create.git

cd form-create

npm install

引入

** 注意 iview版本请>=2.9.2,否则可能存在问题

使用

let rules = window.mock;

new Vue({

mounted:function(){

var $f = this.$formCreate(rules,{

onSubmit:function (formData) {

console.log(formData);

$f.submitStatus({loading:true});

}

});

}

})

$formCreate 参数

rules 表单规则 [inputRule,selectRule,...]

options 组件配置 (详细见底部 createOptions)

$f 实例方法

获得表单数据

$f.formData()

获得指定字段数据

$f.getValue(field)

修改表单数据

$f.changeField(field,value)

表单验证

$f.validate(successFn,errorFn)

表单验证指定字段

$f.validateField(field,errorFn)

重置表单

$f.resetFields()

删除整个表单

$f.remove()

删除指定字段

$f.removeField(field)

获得表单所有字段

$f.fields()

提交表单

$f.submit()

修改提交按钮状态

$f.submitStatus(props) //详细见底部createOptions.submitBtn

rules 规则

hidden 隐藏字段

hiddenRule:

{

type:"hidden",

field:"id", //字段名称

value:"14" //input值

}

input 输入框

inputRule :

{

type:"input",

title:"商品名称",//label名称

field:"goods_name",//字段名称

value:"iphone 7",//input值,

props: {

"type": "text", //输入框类型，可选值为 text、password、textarea、url、email、date

"clearable":false, //是否显示清空按钮

"disabled": false, //设置输入框为禁用状态

"readonly": false, //设置输入框为只读

"rows": 4, //文本域默认行数，仅在 textarea 类型下有效

"autosize": false, //自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }

"number": false, //将用户的输入转换为 Number 类型

"autofocus": false, //自动获取焦点

"autocomplete": "off", //原生的自动完成功能，可选值为 off 和 on

"placeholder": "请输入商品名称", //占位文本

"size": "default", //输入框尺寸，可选值为large、small、default或者不设置,

"spellcheck": false, //原生的 spellcheck 属性

"required":true,

},

event:{

//按下回车键时触发

enter:(event)=>{},

//设置 icon 属性后，点击图标时触发

click:(event)=>{},

//数据改变时触发

change:(event)=>{},

//输入框聚焦时触发

focus:(event)=>{},

//输入框失去焦点时触发

blur:(event)=>{},

//原生的 keyup 事件

keyup:(event)=>{},

//原生的 keydown 事件

keydown:(event)=>{},

//原生的 keypress 事件

keypress:(event)=>{},

},

validate:[

{ required: true, message: '请输入goods_name', trigger: 'blur' },

],

}

radio 单选框

radioRule :

{

type:"radio",

title:"是否包邮",//label名称

field:"is_postage",//字段名称

value:"0",//input值,

options:[

{value:"0",label:"不包邮",disabled:false},

{value:"1",label:"包邮",disabled:true},

],

props