# API

# 获取API$f

  • 全局方法

    $f = formCreate.create(rules)
    $f = vm.$formCreate(rules)
    
  • 组件模式

    <form-create v-model="fApi"></form-create>
    
    new Vue({
      data(){
        return {
            fApi:{}
        }
      }
      })
    

# 属性

# 表单的生成规则

  • 类型: array

  • 用法

$f.rule

# 表单的全局配置

  • 类型: object

  • 用法

$f.config

# 字段操作

# 获取表单所有字段名

  • 返回值: string[]

  • 用法

    const fields = $f.fields();
    

# 获取表单的键值对

  • 返回值: object

  • 用法

    const formData = $f.formData()
    

# 获取指定字段的值

  • 参数{string} field

  • 用法

    const value = $f.getValue(field)
    

    获取 field 组件的值

# 设置字段的值

  • 设置指定字段的值

    • 参数

      • {string} field
      • {any} value
    • 用法

      $f.setValue(field,value)
      

    修改field组件的值为value

  • 批量设置

    • 参数

      • {object} formData
    • 用法

      $f.setValue({
        field1:value1,
        field2:value2,
        field3:value3
      });
      

    修改field1,field2,field3组件的值分别为value1,value2,value3

    别名方法changeValue,changeField

# 删除指定字段

  • 参数{string} [field|name]

  • 返回值{object} rule

  • 用法

    $f.removeField(field)
    

    删除field字段

# 获取双向数据绑定的表单键值对

  • 返回值{object}

  • 用法

    const formData = $f.bind()
    

# 组件操作

# 更新组件规则

  • 参数

    • {string} [field|name]
    • {object} rule
    • {bool} cover 默认为深拷贝,等于 true 时为直接覆盖
  • 返回值{object} rule

  • 用法

    $f.updateRule(field,{
      props:{
        disabled: true
      }
    })
    

# 批量更新组件规则

  • 参数

    • {object} rules
    • {bool} cover 默认为深拷贝,等于 true 时为直接覆盖
  • 用法

    $f.updateRules({
      field1:{
        props:{
          disabled: true
        }
      },
      field2:{
        props:{
          disabled: false
        }
      }
    })
    

# 获取指定组件生成规则

  • 参数{string} [field|name]

  • 返回值{object}

  • 用法

    const rule = $f.getRule(field)
    

# 获取表单组件的生成规则

  • 返回值{object}

  • 用法

    const model = $f.model()
    

    获取表单组件的生成规则,组件定义field属性才可以获取到

# 获取自定义组件生成规则

  • 返回值{object}

  • 用法

    const component = $f.component()
    

    获取自定义组件生成规则,组件定义name属性才可以获取到

# 调用生成组件的方法

  • 参数

    • {string} field/name
    • {string} methodName 组件方法名称
  • 返回值Function

  • 用法

    const val = $f.method('input','focus')();
    

# 手动触发组件的事件

  • 参数

    • {string} field/name
    • {string} eventName 组件方法名称
    • ... args 事件参数
  • 用法

    $f.trigger('input','on-change','new value');
    

# 获取组件的vm/dom元素

  • 参数

    • {string} field/name
  • 返回值Vue|Element

  • 用法

    $f.el(field);
    

# 表单操作

# 表单验证

  • 参数{function} callback

  • 用法

    $f.validate((valid)=>{
      if(valid){
        //TODO 验证通过
      }else{
        //TODO 验证未通过
      }
       
    })
    

# 验证指定字段

  • 参数

    • {string} field
    • {function} callback
  • 用法

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

# 插入组件

  • 参数

    • {object} rule
    • {stirng} [field|name]
    • {boolean} isChild 是否添加到 [field|name] 组件的子级
  • 用法

    $f.prepend({
           type:"input",
           title:"商品简介",
           field:"goods_info",
           value:"",
           props: {
               "type": "text",
               "placeholder": "请输入商品简介",
           },
           validate:[
               { required: true, message: '请输入商品简介', trigger: 'blur' },
           ],
    }, 'goods-name', false);
    

    field的字段之前插入指定表单元素,不传入field默认在第一个.如果isChildtrue,将会添加到field的子级

# 追加组件

  • 参数

    • {object} rule
    • {stirng} [field|name]
    • {bool} isChild 是否添加到 [field|name] 组件的子级
  • 用法

    $f.append({
           type:"input",
           title:"商品简介",
           field:"goods_info",
           value:"",
           props: {
               "type": "text",
               "placeholder": "请输入商品简介",
           },
           validate:[
               { required: true, message: '请输入商品简介', trigger: 'blur' },
           ],
    }, 'goods-name', false);
    

    field的字段之后插入指定表单元素,不传入field默认在最后一个.如果isChildtrue,将会添加到field的子级

# 手动提交表单

  • 参数

    • {function} onSubmit
    • {function} fail
  • 用法

    $f.submit((formData,api)=>{
        //提交表单
    },(api)=>{
        //验证未通过
    })
    

    手动提交表单,如果传入onSubmit参数,就不会再触发option.onSubmit

# 隐藏或显示指定组件

  • 参数

    • {bool} hidden
    • {string|array} [field|name]
  • 用法

    $f.hidden(true)
    
    $f.hidden(true,field)
    
    $f.hidden(true, [field1,field2,field3,name1,name2])
    

# 获取组件显示状态

  • 参数{string} [field|name]

  • 返回值{bool}

  • 用法

const hiddenStatus = $f.hiddenStatus();

# 禁用或取消指定组件

  • 参数

    • {bool} disabled
    • {string|array} field
  • 用法

    $f.disabled(true)
    
    $f.disabled(true, field)
    
    $f.disabled(true, [field1,field2,field3])
    

# 清除组件的验证信息

  • 参数{string|array} field

  • 用法

    $f.clearValidateState();
    
    $f.clearValidateState(field);
    
    $f.clearValidateState([field1,field2]);
    

# 获取表单中的值是否发生变化状态

  • 返回值{bool}

  • 用法

    const status = $f.changeStatus()
    

# 清除表单的值是否发生变化状态

  • 用法

    $f.clearChangeStatus()
    

# 修改表单提交按钮规则

  • 参数{object} props

  • 用法

    $f.submitBtnProps({loading:true})
    
  • 快捷操作:

    • $f.btn.loading(loading = true) 设置提交按钮进入loading状态
    • $f.btn.disabled(disabled = true) 设置提交按钮禁用状态
    • $f.btn.show(isShow = true) 设置提交按钮显示状态

# 修改表单重置按钮规则

  • 参数{object} props

  • 用法

    $f.resetBtnProps({disabled:true})
    
  • 快捷操作:

    • $f.resetBtn.loading(loading = true) 设置重置按钮进入loading状态
    • $f.resetBtn.disabled(disabled = true) 设置重置按钮禁用状态
    • $f.resetBtn.show(isShow = true) 设置重置按钮显示状态

# 关闭frame组件的弹出框

  • 参数{string} [field|name]

  • 用法

    $f.closeModal(field)
    

# 更新全局配置

  • 参数{object} options

  • 用法

    $f.updateOptions({
        onSubmit:(formData)=>{
            //提交表单
        }
    })
    

# 修改表单提交的回调

  • 参数{Function} [onSubmit]

  • 用法

    $f.onSubmit((formData)=>{
        //提交表单
    })
    

# 控制表单整体显示状态

  • 参数{bool} isShow

  • 用法

    $f.hideForm(true)
    

# 将生成规则转换为 json

  • 返回值{string}

  • 用法

    const json = $f.toJson();
    

# 手动重新渲染指定组件

  • 参数{string} [field/name]

  • 用法

    $f.sync(field)
    

# 重载表单

  • 参数{Array} [rules]

  • 用法

    $f.reload(newRule)
    

    按照新的生成规则重载表单生成器,如果不传入rules会按照当前规则重载

# 重新渲染表单

  • 参数{bool} [clear]

  • 用法

    $f.refresh(true)
    

    重新渲染表单,cleartrue时会清空所有组件的缓存

# 重置表单

  • 用法

    $f.resetFields()
    

# 销毁表单

  • 用法

    $f.destroy()
    

# 监听表单事件

  • 参数

    • {string} emitName 生成规则emit事件名称
    • {Function} callback 回调方法
  • 用法

    /*
    rule:{
      field:'goods-name'
      //...
      emit:['on-change']
    }
    */
    
    $f.on('goods-name-on-change',() => {
      //TODO
    });
    

# 监听表单事件,只触发一次

  • 参数

    • {string} emitName 生成规则emit事件名称
    • {Function} callback 回调方法
  • 用法

    /*
      rule:{
        field:'goods-name'
        //...
        emit:['on-change']
      }
      */
    $f.once('goods-name-on-change',() => {
      //TODO
    });
    

    监听一个自定义事件,但是只触发一次,在第一次触发之后移除监听器

# 移除表单事件监听器

  • 参数

    • {string | Array} emitName 生成规则emit事件名称
    • {Function} [callback] 回调方法
  • 用法

    移除自定义事件监听器。

    • 如果没有提供参数,则移除所有的事件监听器;

    • 如果只提供了事件,则移除该事件所有的监听器;

    • 如果同时提供了事件与回调,则只移除这个回调的监听器。

# $f.set

  • 参数

    • {object} node
    • {string} key
    • {any} value
  • 用法

    $f.set(field.rule.col,'span',12)
    

    如果修改组件的规则后页面没有更新时可以尝试使用该方法,该方法与Vue.$set相同