具有数据收集、校验和提交功能的表单生成器，包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能，支持事件扩展。
欢迎大家star学习交流：github地址
示例
https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg
安装
npm install form-create
OR
git clone https://github.com/xaboy/form-create.git cd form-create npm install
引入
<!-- import Vue --> <script src="node_modules/vue/dist/vue.min.js"></script> <!-- import iview --> <link rel="stylesheet" href="node_modules/iview/dist/styles/iview.css" rel="external nofollow" > <script src="node_modules/iview/dist/iview.min.js"></script> <!-- 省市区三级联动json数据 --> <script src="/district/province_city_area.js"></script> <!-- 模拟数据 --> <script src="mock.js"></script> <!-- import formCreate --> <script src="dist/form-create.min.js"></script>
注意! iview版本请>=2.9.2,否则可能存在问题
使用
let rules = window.mock;
new Vue({
mounted:function(){
let $f = this.$formCreate(mock,
{
onSubmit:function (formData) {
console.log(formData);
$f.submitStatus({loading:true});
}
});
//动态添加表单元素
$f.append($r,'goods_name');
}
})
$formCreate 参数
- rules 表单生成规则 [inputRule,selectRule,...]
- options 初始化配置参数 (详细见底部 createOptions)
- $f 实例方法
- formData() 获取表单的value
- getValue(field) 获取指定字段的value
- changeField(field,value) 修改指定字段的value
- resetFields() 重置表单
- destroy() 销毁表单
- removeField(field) 删除指定字段
- fields() 获得表单所有字段名称
- submit() 表单验证通过后提交表单,触发onSubmit事件
- validate(successFn,errorFn) 表单验证,如果验证通过执行successFn,未通过则执行errorFn
- validateField(field,callback) 表单验证指定字段
$f.validateField(field,(errMsg)=>{
if(errMsg){
//TODO 验证未通过
}else{
//TODO 验证通过
}
});
- prepend(rule,field = undefined) 在field的字段之前输入指定表单元素,不传入field默认在第一个
$f.prepend({
type:"input",
title:"商品简介",
field:"goods_info",
value:"",
props: {
"type": "text",
"placeholder": "请输入商品简介",
},
validate:[
{ required: true, message: '请输入商品简介', trigger: 'blur' },
],
});
内容版权声明：除非注明，否则皆为本站原创文章。