使用Vue动态生成form表单的实例代码(6)

UploadRule :
{
  type: "Upload",//必填!
  field: "pic",//必填!
  title: "轮播图",//必填!
  //input值,当maxLength等与1时值为字符串,大于1时值为数组
  value: ['http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg','http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'], //input值
  props: {
   //上传控件的类型，可选值为 select（点击选择），drag（支持拖拽）
   "type":"select", //必填!
   //上传文件类型，可选值为 image（图片上传），file（文件上传）
   "uploadType":"image", //必填!
   //上传的地址
   "action": "", //必填! 
   //上传的文件字段名
   "name":"", 
   //上传时附带的额外参数
   "data":{}, 
   //设置上传的请求头部
   "headers": {}, 
   //是否支持多选文件
   "multiple": true,
   //支持发送 cookie 凭证信息
   "withCredentials":false, 
   //不支持
   // "showUploadList":false, //是否显示已上传文件列表
   // "defaultFileList":[], // 默认已上传的文件列表
   //接受上传的文件类型
   "accept":"",
   //支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用
   "format":[], 
   //文件大小限制，单位 kb
   "maxSize":undefined, 
   //可上传文件数量
   "maxLength":1,
   //上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传
   "beforeUpload":()=>{}, 
   //文件上传时的钩子，返回字段为 event, file, fileList
   "onProgress":()=>{}, 
   //文件上传成功时的钩子，返回字段为 response, file, fileList,若需有把文件添加到文件列表中,在函数值返回即可
   "onSuccess":function () {
    return 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg';
   }, //必填!
   //文件上传失败时的钩子，返回字段为 error, file, fileList
   "onError":(error, file, fileList)=>{}, 
   //点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据
   "onPreview":()=>{}, 
   //文件列表移除文件时的钩子，返回字段为 file, fileList
   "onRemove":()=>{}, 
   //文件格式验证失败时的钩子，返回字段为 file, fileList
   "onFormatError":()=>{}, 
   //文件超出指定大小限制时的钩子，返回字段为 file, fileList
   "onExceededSize":()=>{}, 
   //辅助操作按钮的图标 ,设置为false将不显示
   handleIcon:'ionic',
   //点击辅助操作按钮事件
   onHandle:(src)=>{},
   //是否可删除,设置为false是不显示删除按钮
   allowRemove:true,
  },
 }

{
 //插入节点,默认document.body
 el:null,
 //form配置
 form:{
  //是否开启行内表单模式
  inline:false,
  //表单域标签的位置，可选值为 left、right、top
  labelPosition:'right',
  //表单域标签的宽度，所有的 FormItem 都会继承 Form 组件的 label-width 的值
  labelWidth:125,
  //是否显示校验错误信息
  showMessage:true,
  //原生的 autocomplete 属性，可选值为 off 或 on
  autocomplete:'off',
 },
 //文件上传全局配置
 upload:{
  //上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传
  beforeUpload:()=>{},
  //文件上传时的钩子，返回字段为 event, file, fileList
  onProgress:(event, file, fileList)=>{},
  //文件上传成功时的钩子，返回字段为 response, file, fileList,若需有把文件添加到文件列表中,在函数值返回即可
  onSuccess:(response, file, fileList)=>{
   // return 'filePath';
  },
  //文件上传失败时的钩子，返回字段为 error, file, fileList
  onError:(error, file, fileList)=>{},
  //点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据
  onPreview:(file)=>{},
  //文件列表移除文件时的钩子，返回字段为 file, fileList
  onRemove:(file, fileList)=>{},
  //文件格式验证失败时的钩子，返回字段为 file, fileList
  onFormatError:(file, fileList)=>{},
  //文件超出指定大小限制时的钩子，返回字段为 file, fileList
  onExceededSize:(file, fileList)=>{},
  //辅助操作按钮的图标 ,设置为false将不显示
  handleIcon:'ios-eye-outline',
  //点击辅助操作按钮事件
  onHandle:(src)=>{},
  //是否可删除,设置为false是不显示删除按钮
  allowRemove:true,
 },
 //表单提交事件
 onSubmit:(formData)=>{},
 //提交按钮配置,设置为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,
 }
}