使用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' }, ], }
内容版权声明:除非注明,否则皆为本站原创文章。