精华内容
下载资源
问答
  • 主要介绍了使用Vue动态生成form表单的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下
  • 这篇文章主要介绍了使用Vue动态生成form表单的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下具有数据收集、校验和提交功能的表单生成器,包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三...

    这篇文章主要介绍了使用Vue动态生成form表单的实例代码,非常不错,具有参考借鉴价值,需要的朋友可以参考下

    具有数据收集、校验和提交功能的表单生成器,包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展。

    欢迎大家star学习交流:github地址

    示例

    2511dc4d6df2606c6e324286a1fca356.png

    https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg

    安装

    npm install form-create

    OR

    git clone https://github.com/xaboy/form-create.git

    cd form-create

    npm install

    引入

    注意! iview版本请>=2.9.2,否则可能存在问题

    使用

    let rules = window.mock;

    new Vue({

    mounted:function(){

    let $f = this.$formCreate(mock,

    {

    onSubmit:function (formData) {

    console.log(formData);

    $f.submitStatus({loading:true});

    }

    });

    //动态添加表单元素

    $f.append($r,'goods_name');

    }

    })

    $formCreate 参数rules 表单生成规则 [inputRule,selectRule,...]

    options 初始化配置参数 (详细见底部 createOptions)

    $f 实例方法

    formData() 获取表单的value

    getValue(field) 获取指定字段的value

    changeField(field,value) 修改指定字段的value

    resetFields() 重置表单

    destroy() 销毁表单

    removeField(field) 删除指定字段

    fields() 获得表单所有字段名称

    submit() 表单验证通过后提交表单,触发onSubmit事件

    validate(successFn,errorFn) 表单验证,如果验证通过执行successFn,未通过则执行errorFn

    validateField(field,callback) 表单验证指定字段

    $f.validateField(field,(errMsg)=>{

    if(errMsg){

    //TODO 验证未通过

    }else{

    //TODO 验证通过

    }

    });

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

    $f.prepend({

    type:"input",

    title:"商品简介",

    field:"goods_info",

    value:"",

    props: {

    "type": "text",

    "placeholder": "请输入商品简介",

    },

    validate:[

    { required: true, message: '请输入商品简介', trigger: 'blur' },

    ],

    });

    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' },

    ],

    }

    validate 表单验证规则,具体配置查看 : https://github.com/yiminghe/async-validator

    radio 单选框

    radioRule :

    {

    type:"radio",//必填!

    //label名称

    title:"是否包邮",//必填!

    //字段名称

    field:"is_postage",//必填!

    //input值

    value:"0",

    //可选参数

    options:[

    {value:"0",label:"不包邮",disabled:false},

    {value:"1",label:"包邮",disabled:true},

    ],//必填!

    props: {

    //可选值为 button 或不填,为 button 时使用按钮样式

    "type":undefined,

    //单选框的尺寸,可选值为 large、small、default 或者不设置

    "size":"default",

    //是否垂直排列,按钮样式下无效

    "vertical":false,

    },

    event:{

    //在选项状态发生改变时触发,返回当前状态。通过修改外部的数据改变时不会触发

    change:(...arg)=>{},

    },

    validate:[],

    }

    checkbox 复选框

    checkboxRule :

    {

    type:"checkbox",//必填!

    //label名称

    title:"标签",//必填!

    //字段名称

    field:"label",//必填!

    //input值

    value:[

    "1","2","3"

    ],

    //可选参数

    options:[

    {value:"1",label:"好用",disabled:true},

    {value:"2",label:"方便",disabled:false},

    {value:"3",label:"实用",disabled:false},

    {value:"4",label:"有效",disabled:false},

    ],//必填!

    props: {

    //多选框组的尺寸,可选值为 large、small、default 或者不设置

    "size":"default",

    },

    event:{

    //只在单独使用时有效。在选项状态发生改变时触发,通过修改外部的数据改变时不会触发

    change:(...arg)=>{},

    },

    validate:[],

    }

    select 选择器

    selectRule :

    {

    type: "select",//必填!

    field: "cate_id",//必填!

    title: "产品分类",//必填!

    //input值

    value: ["104","105"],

    //可选参数

    options: [

    {"value": "104", "label": "生态蔬菜", "disabled": false},

    {"value": "105", "label": "新鲜水果", "disabled": false},

    ],//必填!

    props: {

    //是否支持多选

    "multiple": true,

    //是否可以清空选项,只在单选时有效

    "clearable": false,

    //是否支持搜索

    "filterable": true,

    // 暂不支持远程搜索

    // "remote": false, //是否使用远程搜索

    // "remote-method":Function, //远程搜索的方法

    // "loading": false, //当前是否正在远程搜索

    // "loading-text": "加载中", //远程搜索中的文字提示

    //选择框大小,可选值为large、small、default或者不填

    "size":"default",

    //选择框默认文字

    "placeholder": "请选择",

    //当下拉列表为空时显示的内容

    "not-found-text": "无匹配数据",

    //弹窗的展开方向,可选值为 bottom 和 top

    "placement": "bottom",

    //是否禁用

    "disabled": false,

    },

    event:{

    //选中的Option变化时触发,返回 value

    change:(checked)=>{},

    //搜索词改变时触发

    'query-change':(keyword)=>{},

    },

    validate:[],

    }

    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:[],

    }

    InputNumber 数字输入框

    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:[],

    }

    ColorPicker 颜色选择器

    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:[],

    }

    Cascader 多级联动

    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:[],

    }

    Upload 上传

    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,

    },

    }

    accept 文件类型: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept

    全局配置 createOptions

    {

    //插入节点,默认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,

    }

    }

    以上就是本文的全部内容,希望对大家的学习有所帮助,更多相关内容请关注PHP中文网!

    相关推荐:

    展开全文
  • form-create 表单生成器具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,...

    form-create 表单生成器

    具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,文件/图片上传等功能组件。

    如果对您有帮助,您可以在Github点右上角 "Star" 支持一下 谢谢!

    示例

    1.2 版本重大更新

    内部结构优化

    新增 规则生成器$formCreate.maker

    新增 滑块、评分组件

    优化 文件上传组件

    修复 上传组件无法验证等问题

    安装

    npm install form-create

    OR

    git clone https://github.com/xaboy/form-create.git

    cd form-create

    npm install

    引入

    注意! iview版本为2.13.0,Vue版本为2.5.*

    使用

    let rules =window.mock;newVue({

    mounted:function(){

    let $f= this.$formCreate(mock,

    {

    onSubmit:function(formData) {

    console.log(formData);

    $f.submitStatus({loading:true});

    }

    });//动态添加表单元素

    $f.append($r,'goods_name');

    }

    })

    $formCreate 参数

    rules 表单生成规则 [inputRule,selectRule,...]

    options 初始化配置参数 (详细见底部 createOptions)

    $formCreate.maker 组件规则生成器

    除hidden外,其他配置方式全部相同.详细参考表单元素规则

    props,event,slot传入参数为对象,例({key:value,...})

    validate,options参入参数为数组,例([options,options,..])

    hidden 生成隐藏字段

    $formCreate.maker.hidden(field,value)

    input 生成input输入框

    $formCreate.maker.input(title,field,value)

    radio 生成单选框

    checkbox 生成复选框

    select 生成select选择器

    switch 生成switch开关

    datepicker 生成日期选择器组件,别名date

    timepicker 生成时间选择器组件,别名time

    inputnumber 生成数字输入框,别名number

    colorpicker 生成颜色选择器组件,别名color

    cascader 生成多级联动组件

    upload 生成上传组件

    rate 生成评分组件

    slider 生成滑块组件

    $f 实例方法

    formData() 获取表单的value

    getValue(field) 获取指定字段的value

    changeField(field,value) 修改指定字段的value

    resetFields() 重置表单

    destroy() 销毁表单

    removeField(field) 删除指定字段

    fields() 获得表单所有字段名称

    submit() 表单验证通过后提交表单,触发onSubmit事件

    validate(successFn,errorFn) 表单验证,如果验证通过执行successFn,未通过则执行errorFn

    validateField(field,callback)表单验证指定字段

    $f.validateField(field,(errMsg)=>{if(errMsg){//TODO 验证未通过

    }else{//TODO 验证通过

    }

    });

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

    $f.prepend({

    type:"input",

    title:"商品简介",

    field:"goods_info",

    value:"",

    props: {"type": "text","placeholder": "请输入商品简介",

    },

    validate:[

    { required:true, message: '请输入商品简介', trigger: 'blur'},

    ],

    });

    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'},

    ],

    }

    radio 单选框

    radioRule :

    {

    type:"radio",//必填!

    //label名称

    title:"是否包邮",//必填!

    //字段名称

    field:"is_postage",//必填!

    //input值

    value:"0",//可选参数

    options:[

    {value:"0",label:"不包邮",disabled:false},

    {value:"1",label:"包邮",disabled:true},

    ],//必填!

    props: {//可选值为 button 或不填,为 button 时使用按钮样式

    "type":undefined,//单选框的尺寸,可选值为 large、small、default 或者不设置

    "size":"default",//是否垂直排列,按钮样式下无效

    "vertical":false,

    },

    event:{//在选项状态发生改变时触发,返回当前状态。通过修改外部的数据改变时不会触发

    change:(...arg)=>{},

    },

    validate:[],

    }

    checkbox 复选框

    checkboxRule :

    {

    type:"checkbox",//必填!

    //label名称

    title:"标签",//必填!

    //字段名称

    field:"label",//必填!

    //input值

    value:["1","2","3"],//可选参数

    options:[

    {value:"1",label:"好用",disabled:true},

    {value:"2",label:"方便",disabled:false},

    {value:"3",label:"实用",disabled:false},

    {value:"4",label:"有效",disabled:false},

    ],//必填!

    props: {//多选框组的尺寸,可选值为 large、small、default 或者不设置

    "size":"default",

    },

    event:{//只在单独使用时有效。在选项状态发生改变时触发,通过修改外部的数据改变时不会触发

    change:(...arg)=>{},

    },

    validate:[],

    }

    select 选择器

    selectRule :

    {

    type:"select",//必填!

    field: "cate_id",//必填!

    title: "产品分类",//必填!

    //input值

    value: ["104","105"],//可选参数

    options: [

    {"value": "104", "label": "生态蔬菜", "disabled": false},

    {"value": "105", "label": "新鲜水果", "disabled": false},

    ],//必填!

    props: {//是否支持多选

    "multiple": true,//是否可以清空选项,只在单选时有效

    "clearable": false,//是否支持搜索

    "filterable": true,//暂不支持远程搜索

    //"remote": false, //是否使用远程搜索

    //"remote-method":Function, //远程搜索的方法

    //"loading": false, //当前是否正在远程搜索

    //"loading-text": "加载中", //远程搜索中的文字提示

    //选择框大小,可选值为large、small、default或者不填

    "size":"default",//选择框默认文字

    "placeholder": "请选择",//当下拉列表为空时显示的内容

    "not-found-text": "无匹配数据",//弹窗的展开方向,可选值为 bottom 和 top

    "placement": "bottom",//是否禁用

    "disabled": false,

    },

    event:{//选中的Option变化时触发,返回 value

    change:(checked)=>{},//搜索词改变时触发

    'query-change':(keyword)=>{},

    },

    validate:[],

    }

    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', newDate()],

    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:[],

    }

    InputNumber 数字输入框

    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:[],

    }

    ColorPicker 颜色选择器

    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:[],

    }

    Cascader 多级联动

    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:[],

    }

    Upload 上传

    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,

    },

    }

    全局配置 createOptions

    {//插入节点,默认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,

    }

    }

    展开全文
  • 使用Vue动态生成form表单

    千次阅读 2018-04-25 18:23:00
    form-create 表单生成器具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,...
    form-create 表单生成器

    具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,文件/图片上传等功能组件。

    详细查看: github地址 npm地址 文档地址

    如果对您有帮助,您可以在Github点右上角 "Star" 支持一下 谢谢!
    演示项目: 开源的高品质微信商城


     

    示例

    https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg

    1.2 版本重大更新

    • 内部结构优化
    • 新增 规则生成器$formCreate.maker
    • 新增 滑块、评分组件
    • 优化 文件上传组件
    • 修复 上传组件无法验证等问题

     

    安装

    npm install form-create

    OR

    git clone https://github.com/xaboy/form-create.git
    cd form-create
    npm install

    引入

    <!-- import Vue -->
    <script src="node_modules/vue/dist/vue.min.js"></script>
    
    <!-- import iview -->
    <link rel="stylesheet" href="node_modules/iview/dist/styles/iview.css">
    <script src="node_modules/iview/dist/iview.min.js"></script>
    
    <!-- 省市区三级联动json数据 -->
    <script src="/district/province_city_area.js"></script>
    
    <!-- 模拟数据 -->
    <script src="mock.js"></script>
    
    <!-- import formCreate -->
    <script src="dist/form-create.min.js"></script>

    注意! iview版本为2.13.0,Vue版本为2.5.*

     

    使用

    let rules = window.mock;
    new Vue({
      mounted:function(){
        let $f = this.$formCreate(mock,
                {
                    onSubmit:function (formData) {
                        console.log(formData);
                        $f.submitStatus({loading:true});
                }
            });
            //动态添加表单元素
            $f.append($r,'goods_name');
        }
    })

    $formCreate 参数

    • rules 表单生成规则 [inputRule,selectRule,...]
    • options 初始化配置参数 (详细见底部 createOptions)

    $formCreate.maker 组件规则生成器

    除hidden外,其他配置方式全部相同.详细参考表单元素规则

    props,event,slot传入参数为对象,例({key:value,...})

    validate,options参入参数为数组,例([options,options,..])

    • hidden 生成隐藏字段
    $formCreate.maker.hidden(field,value)
    • input 生成input输入框
    $formCreate.maker.input(title,field,value)
    • radio 生成单选框
    • checkbox 生成复选框
    • select 生成select选择器
    • switch 生成switch开关
    • datepicker 生成日期选择器组件,别名date
    • timepicker 生成时间选择器组件,别名time
    • inputnumber 生成数字输入框,别名number
    • colorpicker 生成颜色选择器组件,别名color
    • cascader 生成多级联动组件
    • upload 生成上传组件
    • rate 生成评分组件
    • slider 生成滑块组件

     

    $f 实例方法

    • formData() 获取表单的value
    • getValue(field) 获取指定字段的value
    • changeField(field,value) 修改指定字段的value
    • resetFields() 重置表单
    • destroy() 销毁表单
    • removeField(field) 删除指定字段
    • fields() 获得表单所有字段名称
    • submit() 表单验证通过后提交表单,触发onSubmit事件
    • validate(successFn,errorFn) 表单验证,如果验证通过执行successFn,未通过则执行errorFn
    • validateField(field,callback) 表单验证指定字段
     $f.validateField(field,(errMsg)=>{
            if(errMsg){
                //TODO 验证未通过
            }else{
                //TODO 验证通过
            }
        });
    • prepend(rule,field = undefined) 在field的字段之前输入指定表单元素,不传入field默认在第一个
    $f.prepend({
           type:"input",
           title:"商品简介",
           field:"goods_info",
           value:"",
           props: {
               "type": "text",
               "placeholder": "请输入商品简介",
           },
           validate:[
               { required: true, message: '请输入商品简介', trigger: 'blur' },
           ],
       });
    • 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' },
            ],
        }

    validate 表单验证规则,具体配置查看 : https://github.com/yiminghe/async-validator

    radio 单选框

    radioRule :
    {
            type:"radio",//必填!
            //label名称
            title:"是否包邮",//必填!
            //字段名称
            field:"is_postage",//必填!
            //input值
            value:"0",
            //可选参数
            options:[
                {value:"0",label:"不包邮",disabled:false},
                {value:"1",label:"包邮",disabled:true},
            ],//必填!
            props: {
                //可选值为 button 或不填,为 button 时使用按钮样式
                "type":undefined, 
                //单选框的尺寸,可选值为 large、small、default 或者不设置
                "size":"default", 
                //是否垂直排列,按钮样式下无效
                "vertical":false, 
            },
            event:{
                //在选项状态发生改变时触发,返回当前状态。通过修改外部的数据改变时不会触发
                change:(...arg)=>{},
            },
            validate:[],
        }

    checkbox 复选框

    checkboxRule :
    {
            
            type:"checkbox",//必填!
            //label名称
            title:"标签",//必填!
            //字段名称
            field:"label",//必填!
            //input值
            value:[
                "1","2","3"
            ],
            //可选参数
            options:[
                {value:"1",label:"好用",disabled:true},
                {value:"2",label:"方便",disabled:false},
                {value:"3",label:"实用",disabled:false},
                {value:"4",label:"有效",disabled:false},
            ],//必填!
            props: {
                //多选框组的尺寸,可选值为 large、small、default 或者不设置
                "size":"default", 
            },
            event:{
                //只在单独使用时有效。在选项状态发生改变时触发,通过修改外部的数据改变时不会触发
                change:(...arg)=>{},
            },
            validate:[],
        }

    select 选择器

    selectRule :
    {
            
            type: "select",//必填!
            field: "cate_id",//必填!
            title: "产品分类",//必填!
            //input值
            value: ["104","105"],
            //可选参数
            options: [
                {"value": "104", "label": "生态蔬菜", "disabled": false},
                {"value": "105", "label": "新鲜水果", "disabled": false},
            ],//必填!
            props: {
                    //是否支持多选
                "multiple": true, 
                //是否可以清空选项,只在单选时有效
                "clearable": false,
                //是否支持搜索
                "filterable": true, 
                
                // 暂不支持远程搜索
                // "remote": false, //是否使用远程搜索
                // "remote-method":Function, //远程搜索的方法
                // "loading": false, //当前是否正在远程搜索
                // "loading-text": "加载中", //远程搜索中的文字提示
                //选择框大小,可选值为large、small、default或者不填
                "size":"default", 
                //选择框默认文字
                "placeholder": "请选择", 
                 //当下拉列表为空时显示的内容
                "not-found-text": "无匹配数据",
                //弹窗的展开方向,可选值为 bottom 和 top
                "placement": "bottom", 
                //是否禁用
                "disabled": false, 
            },
            event:{
                //选中的Option变化时触发,返回 value
                change:(checked)=>{},
                //搜索词改变时触发
                'query-change':(keyword)=>{},
            },
            validate:[],
        }

    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:[],
        }

    InputNumber 数字输入框

    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:[],
        }

    ColorPicker 颜色选择器

    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:[],
        }

    Cascader 多级联动

    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:[],
    
        }

    Upload 上传

    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,
            },
        }

    accept 文件类型: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept

    全局配置 createOptions

    {
    
        //插入节点,默认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,
        }
    }

    转载于:https://www.cnblogs.com/xaboy/p/8946411.html

    展开全文
  • form-create 表单生成器具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,...

    form-create 表单生成器

    具有数据收集、校验和提交功能的表单生成器,支持双向数据绑定和事件扩展,组件包含有复选框、单选框、输入框、下拉选择框等表单元素以及省市区三级联动,时间选择,日期选择,颜色选择,滑块,评分,框架,文件/图片上传等功能组件。

    如果对您有帮助,您可以在Github点右上角 "Star" 支持一下 谢谢!

    示例

    1.2 版本重大更新

    内部结构优化

    新增 规则生成器$formCreate.maker

    新增 滑块、评分组件

    优化 文件上传组件

    修复 上传组件无法验证等问题

    安装

    npm install form-create

    OR

    git clone https://github.com/xaboy/form-create.git

    cd form-create

    npm install

    引入

    注意! iview版本为2.13.0,Vue版本为2.5.*

    使用

    let rules =window.mock;newVue({

    mounted:function(){

    let $f= this.$formCreate(mock,

    {

    onSubmit:function(formData) {

    console.log(formData);

    $f.submitStatus({loading:true});

    }

    });//动态添加表单元素

    $f.append($r,'goods_name');

    }

    })

    $formCreate 参数

    rules 表单生成规则 [inputRule,selectRule,...]

    options 初始化配置参数 (详细见底部 createOptions)

    $formCreate.maker 组件规则生成器

    除hidden外,其他配置方式全部相同.详细参考表单元素规则

    props,event,slot传入参数为对象,例({key:value,...})

    validate,options参入参数为数组,例([options,options,..])

    hidden 生成隐藏字段

    $formCreate.maker.hidden(field,value)

    input 生成input输入框

    $formCreate.maker.input(title,field,value)

    radio 生成单选框

    checkbox 生成复选框

    select 生成select选择器

    switch 生成switch开关

    datepicker 生成日期选择器组件,别名date

    timepicker 生成时间选择器组件,别名time

    inputnumber 生成数字输入框,别名number

    colorpicker 生成颜色选择器组件,别名color

    cascader 生成多级联动组件

    upload 生成上传组件

    rate 生成评分组件

    slider 生成滑块组件

    $f 实例方法

    formData() 获取表单的value

    getValue(field) 获取指定字段的value

    changeField(field,value) 修改指定字段的value

    resetFields() 重置表单

    destroy() 销毁表单

    removeField(field) 删除指定字段

    fields() 获得表单所有字段名称

    submit() 表单验证通过后提交表单,触发onSubmit事件

    validate(successFn,errorFn) 表单验证,如果验证通过执行successFn,未通过则执行errorFn

    validateField(field,callback)表单验证指定字段

    $f.validateField(field,(errMsg)=>{if(errMsg){//TODO 验证未通过

    }else{//TODO 验证通过

    }

    });

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

    $f.prepend({

    type:"input",

    title:"商品简介",

    field:"goods_info",

    value:"",

    props: {"type": "text","placeholder": "请输入商品简介",

    },

    validate:[

    { required:true, message: '请输入商品简介', trigger: 'blur'},

    ],

    });

    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'},

    ],

    }

    radio 单选框

    radioRule :

    {

    type:"radio",//必填!

    //label名称

    title:"是否包邮",//必填!

    //字段名称

    field:"is_postage",//必填!

    //input值

    value:"0",//可选参数

    options:[

    {value:"0",label:"不包邮",disabled:false},

    {value:"1",label:"包邮",disabled:true},

    ],//必填!

    props: {//可选值为 button 或不填,为 button 时使用按钮样式

    "type":undefined,//单选框的尺寸,可选值为 large、small、default 或者不设置

    "size":"default",//是否垂直排列,按钮样式下无效

    "vertical":false,

    },

    event:{//在选项状态发生改变时触发,返回当前状态。通过修改外部的数据改变时不会触发

    change:(...arg)=>{},

    },

    validate:[],

    }

    checkbox 复选框

    checkboxRule :

    {

    type:"checkbox",//必填!

    //label名称

    title:"标签",//必填!

    //字段名称

    field:"label",//必填!

    //input值

    value:["1","2","3"],//可选参数

    options:[

    {value:"1",label:"好用",disabled:true},

    {value:"2",label:"方便",disabled:false},

    {value:"3",label:"实用",disabled:false},

    {value:"4",label:"有效",disabled:false},

    ],//必填!

    props: {//多选框组的尺寸,可选值为 large、small、default 或者不设置

    "size":"default",

    },

    event:{//只在单独使用时有效。在选项状态发生改变时触发,通过修改外部的数据改变时不会触发

    change:(...arg)=>{},

    },

    validate:[],

    }

    select 选择器

    selectRule :

    {

    type:"select",//必填!

    field: "cate_id",//必填!

    title: "产品分类",//必填!

    //input值

    value: ["104","105"],//可选参数

    options: [

    {"value": "104", "label": "生态蔬菜", "disabled": false},

    {"value": "105", "label": "新鲜水果", "disabled": false},

    ],//必填!

    props: {//是否支持多选

    "multiple": true,//是否可以清空选项,只在单选时有效

    "clearable": false,//是否支持搜索

    "filterable": true,//暂不支持远程搜索

    //"remote": false, //是否使用远程搜索

    //"remote-method":Function, //远程搜索的方法

    //"loading": false, //当前是否正在远程搜索

    //"loading-text": "加载中", //远程搜索中的文字提示

    //选择框大小,可选值为large、small、default或者不填

    "size":"default",//选择框默认文字

    "placeholder": "请选择",//当下拉列表为空时显示的内容

    "not-found-text": "无匹配数据",//弹窗的展开方向,可选值为 bottom 和 top

    "placement": "bottom",//是否禁用

    "disabled": false,

    },

    event:{//选中的Option变化时触发,返回 value

    change:(checked)=>{},//搜索词改变时触发

    'query-change':(keyword)=>{},

    },

    validate:[],

    }

    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', newDate()],

    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:[],

    }

    InputNumber 数字输入框

    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:[],

    }

    ColorPicker 颜色选择器

    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:[],

    }

    Cascader 多级联动

    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:[],

    }

    Upload 上传

    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,

    },

    }

    全局配置 createOptions

    {//插入节点,默认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,

    }

    }

    展开全文
  • 具有数据收集、校验和提交功能的表单生成器,包含复选框、单选框、输入框、下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展。欢迎大家star学习交流:github地址...
  • [Java教程]vue中怎么动态生成form表单0 2021-02-16 18:00:12 快速生成一个具有动态渲染、数据收集、验证和提交功能的表单生成组件。支持3个UI框架,并且支持生成任何 Vue 组件。form-create 是一个可以通过 JSON ...
  • woai3c/vue-form-maker​github.com简介Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView在Vue里 一般要用到什么组件或数据 都得提前声明所以要根据数据来生成表单 只能使用Vue的render函数要做这一个...
  • 新增的时候根据选择不同的类型动态生成Form表单中的列;查询的时候根据不同类型在table中显示不同的列。 首先根据选择的类型去查询动态的列信息 ...... data() { return() { ......, rules: [], listQuery: {...
  • vue项目中动态生成form表单

    万次阅读 2019-06-28 15:02:52
    在项目中经常遇到动态生成表单的需求,这次打算记录下来。在我的这次项目(vue+element)中,有这样一个需求。类似于 (a || b && c) || ((a || b) && c) && (a || b) 这样的表达式,动态生成...
  • Vue动态生成表单组件vue-form-maker

    千次阅读 2018-12-25 10:30:52
    Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 整体组件布局方式借鉴了form-create的写法 在此表示感谢 在Vue里 一般要用到什么组件或数据 都得提前声明 所以要根据数据来生成表单 只能使用Vue的...
  • Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 在Vue里 一般要用到什么组件或数据 都得提前声明 所以要根据数据来生成表单 只能使用Vue的render函数 要做这一个组件 其实并不难 看一下Vue官方示例 ...
  • vue动态生成表单组件vue-generate-form

    千次阅读 2018-12-25 13:04:50
    Vue动态生成表单组件 可以根据数据配置表单 使用的UI库是iView 在Vue里 一般要用到什么组件或数据 都得提前声明所以要根据数据来生成表单 只能使用Vue的render函数要做这一个组件 其实并不难 看一下Vue官方示例 再找...
  • 需求是根据页面下拉框的值加载不同的json格式的文件,把文件里面parameters(不知道有多少个元素)数组属性动态生成form表单上,并且作为json字符串储存到数据库。 刚拿到这个需求的时候,因为自己以前也没写过...
  • vue动态生成表单绑定数据+添加校验规则一、需求场景以及注意事项一、需求场景一、注意事项二、代码结构一、template中二、data中三、methods中的按钮事件,也就是触发渲染之前的事件三、ant-design中的校验规则一、a...
  • Vue 动态生成表单item

    2021-05-12 18:10:40
    1.首先 判断list(几个item)的长度,判断根据特定标识动态生成 form对象 (动态绑定的数据) 2.绑定在组件上 3.在子组件里进行监听 computed,并且emit出去 大概过程如下: searchData.map((item: any) => ...
  • 主要介绍了vue+element创建动态的form表单动态生成表格的行和列 ,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 效果图: 核心代码: <!-- 添加或修改用户对话框 -->...el-form ref="form" :model="form" :rules="rules" label-width="120px"> <!-- 原始表单学号和姓名 --> <el-row> <e
  • 动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言.最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v-if来渲染对应的表单,数据,事件...
  • 动态创建form表单,网上有插件 (form-create) 不过我不知道它怎么用,没有使用成功,如果你使用成功了,欢迎下方留言.最后我使用了笨方法,针对各个表单写好通用的组件,然后根据type用v-if来渲染对应的表单,数据,事件...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 173
精华内容 69
关键字:

vue动态生成form表单

vue 订阅