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

InputNumberRule :
{
  type: "InputNumber",//必填!
  field: "sort",//必填!
  title: "排序",//必填!
  //input值
  value: 1,
  props: {
   //最大值
   "max": undefined, 
   //最小值
   "min": undefined, 
   //每次改变的步伐，可以是小数
   "step": 1, 
   //输入框尺寸，可选值为large、small、default或者不填
   "size":"default", 
   //设置禁用状态
   "disabled":false, 
   //是否设置为只读
   "readonly":false, 
   //是否可编辑
   "editable":true, 
   //数值精度
   "precision":0, 
  },
  event:{
   //数值改变时的回调，返回当前值
   change:(value)=>{},
   //聚焦时触发
   focus:(event)=>{},
   //失焦时触发
   blur:(event)=>{},
  },
  validate:[],
 }

ColorPickerRule :
{
  type: "ColorPicker",//必填!
  field: "color",//必填!
  title: "颜色",//必填!
  //input值
  value: '#ff7271', 
  props: {
   //是否支持透明度选择
   "alpha": false, 
   //是否支持色彩选择
   "hue": true, 
   //是否显示推荐的颜色预设
   "recommend": false, 
   //尺寸，可选值为large、small、default或者不设置
   "size":"default", 
   //自定义颜色预设
   "colors":[], 
   //颜色的格式，可选值为 hsl、hsv、hex、rgb,开启 alpha 时为 rgb，其它为 hex
   "format":"hex", 
  },
  event:{
   //当绑定值变化时触发，返回当前值
   change:(color)=>{},
   //聚焦时触发 面板中当前显示的颜色发生改变时触发
   'active-change':(color)=>{},
  },
  validate:[],
 }

CascaderRule:
{
  type:"cascader",//必填!
  title:"所在区域",//必填!
  field:"address",//必填!
  //input值
  value:['陕西省','西安市','新城区'],
  props:{
   //可选项的数据源，格式参照示例说明
   data:window.province || [],//必填!
   //选择后展示的函数，用于自定义显示格式
   renderFormat:label => label.join(' / '),
   //是否禁用选择器
   disabled:false,
   //是否支持清除
   clearable:true,
   //输入框占位符
   placeholder:'请选择',
   //次级菜单展开方式，可选值为 click 或 hover
   trigger:'click',
   //当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的示例
   changeOnSelect:false,
   //输入框大小，可选值为large和small或者不填
   size:undefined,
   //动态获取数据，数据源需标识 loading
   loadData:()=>{},
   //是否支持搜索
   filterable:false,
   //当搜索列表为空时显示的内容
   notFoundText:'无匹配数据',
   //是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果
   transfer:false,
  },
  event:{
   //选择完成后的回调，返回值 value 即已选值 value，selectedData 为已选项的具体数据
   change:(value, selectedData)=>{},
   //展开和关闭弹窗时触发
   'visible-change':bool=>{}
  },
  validate:[],
 }