使用Vue动态生成form表单的实例代码(4)
switch 开关
switchRule : { type:"switch",//必填! //label名称 title:"是否上架",//必填! //字段名称 field:"is_show",//必填! //input值 value:"1", props: { //开关的尺寸,可选值为large、small、default或者不写。建议开关如果使用了2个汉字的文字,使用 large。 "size":"default", //禁用开关 "disabled":false, //选中时的值,当使用类似 1 和 0 来判断是否选中时会很有用 "trueValue":"1", //没有选中时的值,当使用类似 1 和 0 来判断是否选中时会很有用 "falseValue":"0", }, slot: { //自定义显示打开时的内容 open:"上架", //自定义显示关闭时的内容 close:"下架", }, event:{ //开关变化时触发,返回当前的状态 0 | 1 change:(bool)=>{}, }, validate:[], }
DatePicker 日期选择器
DatePickerRule : { type: "DatePicker",//必填! field: "section_day",//必填! title: "活动日期",//必填! //input值, type为daterange,datetimerange value为数组 [start_value,end_value] value: ['2018-02-20', new Date()], props: { //显示类型,可选值为 date、daterange、datetime、datetimerange、year、month "type": "datetimerange",//必填! //展示的日期格式 "format": "yyyy-MM-dd HH:mm:ss", //日期选择器出现的位置,可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end "placement": "bottom-start", //占位文本 "placeholder":"请选择获得时间", //是否显示底部控制栏,开启后,选择完日期,选择器不会主动关闭,需用户确认后才可关闭 "confirm":false, //尺寸,可选值为large、small、default或者不设置 "size":"default", //是否禁用选择器 "disabled":false, //是否显示清除按钮 "clearable":true, //完全只读,开启后不会弹出选择器 "readonly":false, //文本框是否可以输入 "editable":false, }, event:{ //日期发生变化时触发,已经格式化后的日期,比如 2016-01-01 change:(value)=>{}, //弹出日历和关闭日历时触发 true | false 'open-change':(bool)=>{}, //在 confirm 模式或 clearable = true 时有效,在清空日期时触发 clear:(...arg)=>{}, }, validate:[], }
TimePicker 时间选择器
TimePickerRule : { type: "TimePicker",//必填! field: "section_time",//必填! title: "活动时间",//必填! //input值, type为timerange value为数组 [start_value,end_value] value: [], props: { //显示类型,可选值为 time、timerange "type": "timerange", //必填! //展示的时间格式 "format": "HH:mm:ss", //下拉列表的时间间隔,数组的三项分别对应小时、分钟、秒。例如设置为 [1, 15] 时,分钟会显示:00、15、30、45。 "steps": [], //时间选择器出现的位置,可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end "placement": "bottom-start", //占位文本 "placeholder":"请选择获得时间", //是否显示底部控制栏,开启后,选择完日期,选择器不会主动关闭,需用户确认后才可关闭 "confirm":false, //尺寸,可选值为large、small、default或者不设置 "size":"default", //是否禁用选择器 "disabled":false, //是否显示清除按钮 "clearable":true, //完全只读,开启后不会弹出选择器 "readonly":false, //文本框是否可以输入 "editable":false, }, event:{ //时间发生变化时触发 已经格式化后的时间,比如 09:41:00 change:(checked)=>{}, //弹出浮层和关闭浮层时触发 true | false 'open-change':(bool)=>{}, //在清空日期时触发 clear:(...arg)=>{}, }, validate:[], }
内容版权声明:除非注明,否则皆为本站原创文章。