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

someone1
AI专业者开发社区 1 号成员
AI开发者社区 • 0 回帖 • 35 浏览 • 4 个月前

使用Vue动态生成form表单

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

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

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

示例

1.2 版本重大更新

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

安装

npm install form-create

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 生成隐藏字段

1	`$formCreate.maker.hidden(field,value)`

input 生成 input 输入框

1	`$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:</span>"input",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填! </span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">label名称</span>
    title:"商品名称",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">字段名称</span>
    field:"goods_name",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">input值</span>
    value:"iphone 7"<span style="color: rgba(0, 0, 0, 1)">,
    props: {
        
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">输入框类型，可选值为 text、password、textarea、url、email、date</span>
        "type": "text", <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
        <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">是否显示清空按钮</span>
        "clearable":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">设置输入框为禁用状态</span>
        "disabled": <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">设置输入框为只读</span>
        "readonly": <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">文本域默认行数，仅在 textarea 类型下有效</span>
        "rows": 4<span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">自适应内容高度，仅在 textarea 类型下有效，可传入对象，如 { minRows: 2, maxRows: 6 }</span>
        "autosize": <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">将用户的输入转换为 Number 类型</span>
        "number": <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">自动获取焦点</span>
        "autofocus": <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">原生的自动完成功能，可选值为 off 和 on</span>
        "autocomplete": "off"<span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">占位文本</span>
        "placeholder": "请输入商品名称"<span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">输入框尺寸，可选值为large、small、default或者不设置</span>
        "size": "default"<span style="color: rgba(0, 0, 0, 1)">,
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">原生的 spellcheck 属性</span>
        "spellcheck": <span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    },
    event:{
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">按下回车键时触发</span>
        enter:(event)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">设置 icon 属性后，点击图标时触发</span>
        click:(event)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">数据改变时触发</span>
        change:(event)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">输入框聚焦时触发</span>
        focus:(event)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">输入框失去焦点时触发</span>
        blur:(event)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">原生的 keyup 事件</span>
        keyup:(event)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">原生的 keydown 事件</span>
        keydown:(event)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">原生的 keypress 事件</span>
        keypress:(event)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
    },
    validate:[
        { required: </span><span style="color: rgba(0, 0, 255, 1)">true</span>, message: '请输入goods_name', trigger: 'blur'<span style="color: rgba(0, 0, 0, 1)"> },
    ],
}</span></pre>

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:</span>"checkbox",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">label名称</span>
    title:"标签",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">字段名称</span>
    field:"label",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">input值</span>

        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: </span>"select",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    field: "cate_id",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    title: "产品分类",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">input值</span>
    value: ["104","105"<span style="color: rgba(0, 0, 0, 1)">],
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">可选参数</span>

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

switch 开关

switchRule :
{
    type:</span>"switch",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">label名称</span>
    title:"是否上架",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">字段名称</span>
    field:"is_show",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">input值</span>
    value:"1"<span style="color: rgba(0, 0, 0, 1)">,
    props: {
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">开关的尺寸，可选值为large、small、default或者不写。建议开关如果使用了2个汉字的文字，使用 large。</span>
        "size":"default"<span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">禁用开关</span>
        "disabled":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用</span>
        "trueValue":"1"<span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">没有选中时的值，当使用类似 1 和 0 来判断是否选中时会很有用</span>
        "falseValue":"0"<span style="color: rgba(0, 0, 0, 1)">, 
    },
    slot: {
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">自定义显示打开时的内容</span>
        open:"上架"<span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">自定义显示关闭时的内容</span>
        close:"下架"<span style="color: rgba(0, 0, 0, 1)">, 
    },
    event:{
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">开关变化时触发，返回当前的状态 0 | 1</span>
        change:(bool)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
    },
    validate:[],
}</span></pre>

DatePicker 日期选择器

DatePickerRule :
{
    type: </span>"DatePicker",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    field: "section_day",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    title: "活动日期",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">input值, type为daterange,datetimerange value为数组 [start_value,end_value]</span>
    value: ['2018-02-20', <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Date()], 
    props: {
        
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">显示类型，可选值为 date、daterange、datetime、datetimerange、year、month</span>
        "type": "datetimerange",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
        <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">展示的日期格式</span>
        "format": "yyyy-MM-dd HH🇲🇲ss"<span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">日期选择器出现的位置，可选值为toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end</span>
        "placement": "bottom-start"<span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">占位文本</span>
        "placeholder":"请选择获得时间"<span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">是否显示底部控制栏，开启后，选择完日期，选择器不会主动关闭，需用户确认后才可关闭</span>
        "confirm":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">尺寸，可选值为large、small、default或者不设置</span>
        "size":"default"<span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">是否禁用选择器</span>
        "disabled":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">是否显示清除按钮</span>
        "clearable":<span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">完全只读，开启后不会弹出选择器</span>
        "readonly":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">文本框是否可以输入</span>
        "editable":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, 
    },
    event:{
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">日期发生变化时触发,已经格式化后的日期，比如 2016-01-01</span>
        change:(value)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">弹出日历和关闭日历时触发 true | false</span>
        'open-change':(bool)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">在 confirm 模式或 clearable = true 时有效，在清空日期时触发</span>
        clear:(...arg)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
    },
    validate:[],
}</span></pre>

TimePicker 时间选择器

TimePickerRule :
{
    type: </span>"TimePicker",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    field: "section_time",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    title: "活动时间",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">input值, type为timerange value为数组 [start_value,end_value]</span>

        value: [],
props: {
//显示类型，可选值为 time、timerange
"type": "timerange", //必填!
//展示的时间格式
"format": "HH🇲🇲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: </span>"InputNumber",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    field: "sort",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    title: "排序",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">input值</span>
    value: 1<span style="color: rgba(0, 0, 0, 1)">,
    props: {
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">最大值</span>
        "max"<span style="color: rgba(0, 0, 0, 1)">: undefined, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">最小值</span>
        "min"<span style="color: rgba(0, 0, 0, 1)">: undefined, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">每次改变的步伐，可以是小数</span>
        "step": 1<span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">输入框尺寸，可选值为large、small、default或者不填</span>
        "size":"default"<span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">设置禁用状态</span>
        "disabled":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">是否设置为只读</span>
        "readonly":<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">是否可编辑</span>
        "editable":<span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">数值精度</span>
        "precision":0<span style="color: rgba(0, 0, 0, 1)">, 
    },
    event:{
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">数值改变时的回调，返回当前值</span>
        change:(value)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">聚焦时触发</span>
        focus:(event)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">失焦时触发</span>
        blur:(event)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
    },
    validate:[],
}</span></pre>

ColorPicker 颜色选择器

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

Cascader 多级联动

CascaderRule:
{
    type:</span>"cascader",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    title:"所在区域",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    field:"address",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">input值</span>
    value:['陕西省','西安市','新城区'<span style="color: rgba(0, 0, 0, 1)">],
    props:{
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">可选项的数据源，格式参照示例说明</span>
        data:window.province || [],<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
        <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">选择后展示的函数，用于自定义显示格式</span>
        renderFormat:label =&gt; label.join(' / '<span style="color: rgba(0, 0, 0, 1)">),
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">是否禁用选择器</span>
        disabled:<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">是否支持清除</span>
        clearable:<span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">输入框占位符</span>
        placeholder:'请选择'<span style="color: rgba(0, 0, 0, 1)">,
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">次级菜单展开方式，可选值为 click 或 hover</span>
        trigger:'click'<span style="color: rgba(0, 0, 0, 1)">,
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的示例</span>
        changeOnSelect:<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">输入框大小，可选值为large和small或者不填</span>

            size:undefined,
//动态获取数据，数据源需标识 loading
loadData:()=>{},
//是否支持搜索
filterable:false,
//当搜索列表为空时显示的内容
notFoundText:'无匹配数据',
//是否将弹层放置于 body 内，在 Tabs、带有 fixed 的 Table 列内使用时，建议添加此属性，它将不受父级样式影响，从而达到更好的效果
transfer:false,
},
event:{
//选择完成后的回调，返回值 value 即已选值 value，selectedData 为已选项的具体数据
change:(value, selectedData)=>{},
//展开和关闭弹窗时触发
'visible-change':bool=>{}
},
validate:[],
}</span></pre>

Upload 上传

UploadRule :
{
    type: </span>"Upload",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    field: "pic",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    title: "轮播图",<span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
    <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">input值,当maxLength等与1时值为字符串,大于1时值为数组</span>
    value: ['http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg','http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'], <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">input值</span>

        props: {
//上传控件的类型，可选值为 select（点击选择），drag（支持拖拽）
"type":"select", //必填!
//上传文件类型，可选值为 image（图片上传），file（文件上传）
"uploadType":"image", //必填!
//上传的地址
"action": "", //必填! 
//上传的文件字段名
"name":"",
//上传时附带的额外参数
"data":{},
//设置上传的请求头部
"headers": {},
//是否支持多选文件
"multiple": true,
//支持发送 cookie 凭证信息
"withCredentials":false,
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">不支持</span>
        <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "showUploadList":false, //是否显示已上传文件列表</span>
        <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> "defaultFileList":[], // 默认已上传的文件列表</span>
        
        <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">接受上传的文件类型</span>
        "accept":""<span style="color: rgba(0, 0, 0, 1)">,
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">支持的文件类型，与 accept 不同的是，format 是识别文件的后缀名，accept 为 input 标签原生的 accept 属性，会在选择文件时过滤，可以两者结合使用</span>
        "format"<span style="color: rgba(0, 0, 0, 1)">:[], 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">文件大小限制，单位 kb</span>
        "maxSize"<span style="color: rgba(0, 0, 0, 1)">:undefined, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">可上传文件数量</span>
        "maxLength":1<span style="color: rgba(0, 0, 0, 1)">,
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传</span>
        "beforeUpload":()=&gt;<span style="color: rgba(0, 0, 0, 1)">{}, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">文件上传时的钩子，返回字段为 event, file, fileList</span>
        "onProgress":()=&gt;<span style="color: rgba(0, 0, 0, 1)">{}, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">文件上传成功时的钩子，返回字段为 response, file, fileList,若需有把文件添加到文件列表中,在函数值返回即可</span>
        "onSuccess":<span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () {
            </span><span style="color: rgba(0, 0, 255, 1)">return</span> 'http://img1.touxiang.cn/uploads/20131030/30-075657_191.jpg'<span style="color: rgba(0, 0, 0, 1)">;
        }, </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">必填!</span>
        <span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">文件上传失败时的钩子，返回字段为 error, file, fileList</span>
        "onError":(error, file, fileList)=&gt;<span style="color: rgba(0, 0, 0, 1)">{}, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">点击已上传的文件链接时的钩子，返回字段为 file， 可以通过 file.response 拿到服务端返回数据</span>
        "onPreview":()=&gt;<span style="color: rgba(0, 0, 0, 1)">{}, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">文件列表移除文件时的钩子，返回字段为 file, fileList</span>
        "onRemove":()=&gt;<span style="color: rgba(0, 0, 0, 1)">{}, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">文件格式验证失败时的钩子，返回字段为 file, fileList</span>
        "onFormatError":()=&gt;<span style="color: rgba(0, 0, 0, 1)">{}, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">文件超出指定大小限制时的钩子，返回字段为 file, fileList</span>
        "onExceededSize":()=&gt;<span style="color: rgba(0, 0, 0, 1)">{}, 
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">辅助操作按钮的图标 ,设置为false将不显示</span>
        handleIcon:'ionic'<span style="color: rgba(0, 0, 0, 1)">,
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">点击辅助操作按钮事件</span>
        onHandle:(src)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">是否可删除,设置为false是不显示删除按钮</span>
        allowRemove:<span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
    },
}</span></pre>

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

全局配置 createOptions

{
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">插入节点,默认document.body</span>
el:<span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">,
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">form配置</span>

    form:{
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">是否开启行内表单模式</span>
    inline:<span style="color: rgba(0, 0, 255, 1)">false</span><span style="color: rgba(0, 0, 0, 1)">,
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">表单域标签的位置，可选值为 left、right、top</span>
    labelPosition:'right'<span style="color: rgba(0, 0, 0, 1)">,
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">表单域标签的宽度，所有的 FormItem 都会继承 Form 组件的 label-width 的值</span>
    labelWidth:125<span style="color: rgba(0, 0, 0, 1)">,
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">是否显示校验错误信息</span>
    showMessage:<span style="color: rgba(0, 0, 255, 1)">true</span><span style="color: rgba(0, 0, 0, 1)">,
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">原生的 autocomplete 属性，可选值为 off 或 on</span>
    autocomplete:'off'<span style="color: rgba(0, 0, 0, 1)">,
},
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">文件上传全局配置</span>

    upload:{
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传</span>
    beforeUpload:()=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">文件上传时的钩子，返回字段为 event, file, fileList</span>
    onProgress:(event, file, fileList)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">文件上传成功时的钩子，返回字段为 response, file, fileList,若需有把文件添加到文件列表中,在函数值返回即可</span>
    onSuccess:(response, file, fileList)=&gt;<span style="color: rgba(0, 0, 0, 1)">{
        </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> return 'filePath';</span>

        },
//文件上传失败时的钩子，返回字段为 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,
},
</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">表单提交事件</span>
onSubmit:(formData)=&gt;<span style="color: rgba(0, 0, 0, 1)">{},

</span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">提交按钮配置,设置为false时不显示按钮</span>

    submitBtn:{
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">按钮类型，可选值为primary、ghost、dashed、text、info、success、warning、error或者不设置</span>
    type:"primary"<span style="color: rgba(0, 0, 0, 1)">,
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">按钮大小，可选值为large、small、default或者不设置</span>
    size:"large"<span style="color: rgba(0, 0, 0, 1)">,
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)">按钮形状，可选值为circle或者不设置</span>

        shape:undefined,
//开启后，按钮的长度为 100%
long:true,
//设置 button 原生的 type，可选值为 button、submit、reset
htmlType:"button",
//设置按钮为禁用状态
disabled:false,
//设置按钮的图标类型
icon:"ios-upload",
//按钮文字提示
innerText:"提交",
//设置按钮为加载中状态
loading:false,
}
}

使用Vue动态生成form表单

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

示例

1.2 版本重大更新

安装

引入

使用

$formCreate 参数

$formCreate.maker 组件规则生成器

$f 实例方法

rules 表单元素规则

hidden 隐藏字段

input 输入框

radio 单选框

checkbox 复选框

select 选择器

switch 开关

DatePicker 日期选择器

TimePicker 时间选择器

InputNumber 数字输入框

ColorPicker 颜色选择器

Cascader 多级联动

Upload 上传

全局配置 createOptions

相关帖子

随便看看

使用Vue动态生成form表单

使用Vue动态生成form表单

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

示例

1.2 版本重大更新

安装

引入

使用

$formCreate 参数

$formCreate.maker 组件规则生成器

$f 实例方法

rules 表单元素规则

hidden 隐藏字段

input 输入框

radio 单选框

checkbox 复选框

select 选择器

switch 开关

DatePicker 日期选择器

TimePicker 时间选择器

InputNumber 数字输入框

ColorPicker 颜色选择器

Cascader 多级联动

Upload 上传

全局配置 createOptions

相关帖子

随便看看

使用Vue动态生成form表单

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