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

append(rule,field = undefined) 在field的字段之前输入指定表单元素,不传入field默认在最后一个

$f.append({
  type:"input",
  title:"商品简介",
  field:"goods_info",
  value:"",
  props: {
   "type": "text",
   "placeholder": "请输入商品简介",
  },
  validate:[
   { required: true, message: '请输入商品简介', trigger: 'blur' },
  ],
 });
  • submitStatus(props) 修改表单提交按钮状态
$f.submitStatus({
  //按钮类型,可选值为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
 })
  • btn.loading() 让表单提交按钮进入loading状态
  • btn.finish() 让表单提交按钮恢复正常状态

rules 表单元素规则

hidden 隐藏字段

hiddenRule:
{
 type:"hidden",//必填!
 //字段名称
 field:"id", //必填!
 //input值
 value:"14" //必填!
}

input 输入框

inputRule :
{
  type:"input",//必填! 
  //label名称
  title:"商品名称",//必填!
  //字段名称
  field:"goods_name",//必填!
  //input值
  value:"iphone 7",
  props: {
   //输入框类型,可选值为 text、password、textarea、url、email、date
   "type": "text", //必填!
   //是否显示清空按钮
   "clearable":false, 
   //设置输入框为禁用状态
   "disabled": false, 
   //设置输入框为只读
   "readonly": false,
   //文本域默认行数,仅在 textarea 类型下有效
   "rows": 4, 
   //自适应内容高度,仅在 textarea 类型下有效,可传入对象,如 { minRows: 2, maxRows: 6 }
   "autosize": false, 
   //将用户的输入转换为 Number 类型
   "number": false, 
   //自动获取焦点
   "autofocus": false, 
   //原生的自动完成功能,可选值为 off 和 on
   "autocomplete": "off", 
   //占位文本
   "placeholder": "请输入商品名称", 
   //输入框尺寸,可选值为large、small、default或者不设置
   "size": "default",
   //原生的 spellcheck 属性
   "spellcheck": false,
  },
  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' },
  ],
 }
      

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/174.html