xinya-form
基于iview的动态渲染组件
Usage
Install
npm i xinya-form
Import
Vue
Use it!
xinya-form
offers two ways of using a XinyaForm
.
Default Usage
In the sample below, the collection is instantiated as an Array
and passed directly to the XinyaForm
in that form.
Default Props
//插入节点,默认document.body el:null //是否自动转换规则中的 maker 生成器为对象 switchMaker:true //是否开启iframe组件子页面助手函数 //`${field}_change(value)` //只能设置当前字段的 value //form_create_helper.close(field) //form_create_helper.get(field) //form_create_helper.set(field,value) //快速修改该组件的value. 跨域无效!! iframeHelper:false //form配置 form: //是否开启行内表单模式 inline:false //表单域标签的位置,可选值为 left、right、top labelPosition:'right' //表单域标签的宽度,所有的 FormItem 都会继承 Form 组件的 label-width 的值 labelWidth:125 //是否显示校验错误信息 showMessage:true //原生的 autocomplete 属性,可选值为 off 或 on autocomplete:'off' //row布局配置 row: //栅格间距,单位 px,左右平分 gutter:0 //布局模式,可选值为flex或不选,在现代浏览器下有效 type:undefined //flex 布局下的垂直对齐方式,可选值为top、middle、bottom align:undefined //flex 布局下的水平排列方式,可选值为start、end、center、space-around、space-between justify:undefined //自定义的class名称 className:undefined //上传组件全局配置 upload: //上传文件之前的钩子,参数为上传的文件,若返回 false 或者 Promise 则停止上传 {} //文件上传时的钩子,返回字段为 event, file, fileList {} //文件上传成功时的钩子,返回字段为 response, file, fileList, //若需有把文件添加到文件列表中,在函数值返回即可 { // return 'filePath'; } //文件上传失败时的钩子,返回字段为 error, file, fileList {} //点击已上传的文件链接时的钩子,返回字段为 file, //可以通过 file.response 拿到服务端返回数据 {} //文件列表移除文件时的钩子,返回字段为 file, fileList {} //文件格式验证失败时的钩子,返回字段为 file, fileList {} //文件超出指定大小限制时的钩子,返回字段为 file, fileList {} //辅助操作按钮的图标 ,设置为false将不显示 handleIcon:'ios-eye-outline' //点击辅助操作按钮事件 {} //是否可删除,设置为false是不显示删除按钮 allowRemove:true //表单创建成功后回调函数 {} //表单提交事件 {} //表单重载后回调函数`onReload`全局配置项,可用于更新`$f` //>=1.5.3版本 {} //提交按钮配置,设置submitBtn=false或submitBtn.show=false时不显示按钮 submitBtn: //按钮类型,可选值为primary、ghost、dashed、text、info、success、warning、error或者不设置 type:"primary" //按钮大小,可选值为large、small、default或者不设置 size:"large" //按钮形状,可选值为circle或者不设置 shape:undefined //开启后,按钮的长度为 100% long:true //设置button原生的type,可选值为button、submit、reset htmlType:"button" //设置按钮为禁用状态 disabled:false //设置按钮的图标类型 icon:"ios-upload" //按钮文字提示 innerText:"提交" //设置按钮为加载中状态 loading:false //默认显示 show:true //设置提交按钮布局规则,参考 col 栅格布局规则 col:undefined //重置按钮默认配置,设置resetBtn=true或resetBtn.show=true时显示 resetBtn: //配置说明同上 type:"ghost" size:"large" shape:undefined long:true htmlType:"button" disabled:false icon:"refresh" innerText:"重置" loading:false //默认不显示 show:false //设置重置按钮布局规则,参考 col 栅格布局规则 col:undefined