form-create

# API

高级版FormCreate表单设计器强势登场,让表单设计更简单 (opens new window)

# 获取API

  • 全局方法

    const fApi = formCreate(rules)
const fApi = vm.$formCreate(rules)

  • 组件模式

    <form-create v-model="fApi"></form-create>

    export default {
  data(){
    return {
      fApi: null
    }
  }
}

# 属性

# 生成规则

type rule = FormRule[]
  • 用法：
const rules = fApi.rule

# 全局配置

type config = Object
  • 用法：
const options = fApi.config

别名 fApi.options

# 表单数据

type form = { [field:string]:any }
  • 用法：
const formData = fApi.form
formData.goods_name = 'huawei'

该属性是双向绑定的

# 字段操作

# 获取表单字段

type fields = ()=>string[]
  • 用法：
const fields = fApi.fields()

# 获取指定字段值

type getValue = (field:string) => any
  • 用法：
const value = fApi.getValue('goods_name')

# 设置表单值

覆盖方式 v2.5.0+

未定义的字段会设置为 null

type coverValue = (formData:{[field:string]:any}) => void
  • 用法：
fApi.coverValue({goods_name:'HuaWei'})

合并方式

未定义的字段不做修改

interface setValue {
    (formData:{[field:string]:any}): void
    (field:string, value:any): void
}
  • 用法：
fApi.setValue({goods_name:'HuaWei'})

别名方法changeValue, changeField

# 重置表单值

interface resetFields {
    ():void
    (field:string[]):void
}
  • 用法：
fApi.resetFields()

# 隐藏字段 (不渲染)

组件不渲染

Dom 节点不渲染, 可以避免表单验证生效

interface hidden {
    //隐藏全部组件
    (status:Boolean):void
    //隐藏指定组件
    (status:Boolean, field:string):void
    //隐藏部分组件
    (status:Boolean, field:string[]):void 
}
  • 用法：
fApi.hidden(true, 'goods_name')

# 获取组件隐藏状态

type hiddenStatus = (field:string)=>Boolean
  • 用法：
const status = fApi.hiddenStatus('goods_name')

# 隐藏组件 (渲染)

css隐藏

通过 display:none 隐藏组件

interface display {
    //隐藏全部组件
    (status:Boolean):void
    //隐藏指定组件
    (status:Boolean, field:string):void 
    //隐藏部分组件
    (status:Boolean, field:string[]):void 
}
  • 用法：
fApi.display(false, 'goods_name')

# 获取组件隐藏状态

type displayStatus = (field:string)=>Boolean
  • 用法：
const status = fApi.displayStatus('goods_name')

# 禁用组件

interface disabled {
    //禁用全部组件
    (status:Boolean):void 
    //禁用指定组件
    (status:Boolean, field:string):void 
    //禁用部分组件
    (status:Boolean, field:string[]):void 
}
  • 用法：
fApi.disabled(true, 'goods_name')

# 删除字段

type removeField = (field:string) => FormRule
  • 用法：
const rule = fApi.removeField('goods_name')

# 刷新组件渲染

interface sync{
    //通过 field 更新指定组件
    (field:string):void
    //通过生成规则更新指定组件
    (rule:FormRule):void
}
  • 用法：
fApi.sync('goods_name')

# 组件方法

执行组件方法 v2.5.0+

type exec = (field:string, method:string, ...args:any[]) => any
  • 用法：
fApi.exec('goods_name','force')

获取组件方法

type method = (field:string, method:string) => Function
  • 用法：
const method = fApi.method('goods_name','force')

# 手动触发组件事件

type trigger = (field:string, event:string, ...args:any[]) => void
  • 用法：
fApi.trigger('goods_name', 'on-change')

# 获取组件的vm/dom元素

type el = (field:string) => Vue|Document|undefined
  • 用法：
const vm = fApi.el('goods_name')

# 关闭frame组件的弹出框

type closeModal = (field:string) => void
  • 用法：
fApi.closeModal('frame')

# 规则操作

# 获取规则

interface getRule {
    (field:string):Rule
    (field:string, origin: true): FormRule
}
  • 用法：
const rule = fApi.getRule('goods_name')

origin 参数 v2.5.0+ 支持

# 插入规则

前置插入

interface prepend {
    //插入到第一个
    (rule:FormRule):void 
    //插入指定字段前面
    (rule:FormRule, field:string):void
    //插入到指定字段 children 中
    (rule:FormRule, field:string, child:true):void
}
  • 用法：
fApi.prepend({
     type:"input",
     title:"商品简介",
     field:"goods_info",
     value:"",
     props: {
         "type": "text",
         "placeholder": "请输入商品简介",
     },
     validate:[
         { required: true, message: '请输入商品简介', trigger: 'blur' },
     ],
}, 'goods-name')

后置追加

interface append {
    //插入到最后一个
    (rule:FormRule):void 
    //插入指定字段后面
    (rule:FormRule, field:string):void
    //插入到指定字段 children 中
    (rule:FormRule, field:string, child:true):void
}
  • 用法：
fApi.append({
     type:"input",
     title:"商品简介",
     field:"goods_info",
     value:"",
     props: {
         "type": "text",
         "placeholder": "请输入商品简介",
     },
     validate:[
         { required: true, message: '请输入商品简介', trigger: 'blur' },
     ],
}, 'goods-name')

# 删除指定规则

type removeRule = (rule:FormRule) => FormRule
  • 用法：
const rule = {type:'input', /** ... **/}
fApi.removeRule(rule)

# 获取表单组件规则

interface model{                
    //获取Object规则
    ():Rule[]              
    //获取原始规则
    (origin:true):FormRule[]
}
  • 用法：
const rules = fApi.model()

origin 参数 v2.5.0+ 支持

# 获取自定义组件规则

定义 name 配置后才可以获取到

interface component{                
    //获取Object规则
    ():Rule[]              
    //获取原始规则
    (origin:true):FormRule[]
}
  • 用法：
const componentRules = fApi.component()

origin 参数 v2.5.0+ 支持

# 更新指定规则

合并更新

type mergeRule = (rule:Rule)=>void
  • 用法：
fApi.mergeRule('goods_name', {hidden: true})

# 批量更新

type mergeRules = (rules:{[field:string]:Rule})=>void
  • 用法：
fApi.mergeRules({'goods_name': {hidden: true}})

覆盖更新

type updateRule = (rule:Rule)=>void
  • 用法：
fApi.updateRule('goods_name', {hidden: true})

# 批量更新

type updateRules = (rules:{[field:string]:Rule})=>void
  • 用法：
fApi.updateRules({'goods_name': {hidden: true}})

# 更新自定义属性

type setEffect = (id:string, attr: string, value:any)=>void
  • 用法：
fApi.setEffect('goods_name', 'required', false)

# 验证操作

# 验证表单

type validate = (callback:(...args:any[]) => void)=> void
  • 用法：
fApi.validate((valid, fail) => {
    if(valid){
        //todo 表单验证通过
    }else{
        //todo 表单验证未通过
    }
})

# 验证指定字段

type validateField = (field, callback:(...args:any[]) => void)=> void
  • 用法：
fApi.validateField('goods_name', (valid, fail) => {
    if(valid){
        //todo 字段验证通过
    }else{
        //todo 字段验证未通过
    }
})

# 更新验证规则

interface updateValidate{
    //覆盖更新
    (field:string, validate:Object[]):void
    //合并更新
    (field:string, validate:Object[], merge:true):void
}
  • 用法：
fApi.updateValidate('goods_name',[{required:true}], true)

# 批量更新

interface updateValidates{
    //覆盖更新
    (validates:{[field:string]: Object[]}):void
    //合并更新
    (validates:{[field:string]: Object[]}, merge:true):void
}
  • 用法：
fApi.updateValidates({'goods_name': [{required:false}]})

# 刷新验证规则

如果修改验证规则后没有生效,可通过该方法手动刷新

type refreshValidate = ()=>void
  • 用法：
fApi.refreshValidate()

# 清除表单验证状态

interface clearValidateState {
    ():void
    (field:string, clearSub?:boolean):void
    (field:string[], clearSub?:boolean):void
}
  • 用法：
fApi.clearValidateState('goods_name')

# 清除子表单验证状态

可清除group,object子表单的验证状态

interface clearSubValidateState {
    (field:string):void
    (field:string[]):void
}
  • 用法：
fApi.clearSubValidateState('goods_name')

# 表单操作

# 获取表单数据

interface formData {
    //获取全部数据
    (): {[field:string]:any }
    //获取部分字段的数据
    (field:string[]): {[field:string]:any }
}
  • 用法：
const formData = fApi.formData()

该方法的返回值不是双向绑定

# 获取表单数据 (双向绑定)

type bind = () => { [field:string]:any }
  • 用法：
const formData = fApi.bind()

该方法是form属性的别名

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

type changeStatus = ()=>Boolean
  • 用法：
const status = fApi.changeStatus()

# 清除变化状态

type clearChangeStatus = ()=>void
  • 用法：
fApi.clearChangeStatus()

# 修改提交按钮

type submitBtnProps = (props:Object) => void
  • 用法：
fApi.submitBtnProps({disabled:true})

  • 快捷操作:

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

# 修改重置按钮

type resetBtnProps = ( props:Object) => void
  • 用法：
fApi.resetBtnProps({disabled:true})

  • 快捷操作:

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

# 更新表单配置

type updateOptions = (options:Object) => void
  • 用法：
fApi.updateOptions({form:{inline:true}})

# 更新表单提交事件

type onSubmit = (callback:(formData:Object,fApi:fApi)=>void) => void
  • 用法：
fApi.onSubmit((formData, fApi)=>{
    //todo 提交表单
})

# 刷新表单配置

type refreshOptions = ()=>void
  • 用法：
fApi.refreshOptions()

# 刷新表单渲染

type refresh = ()=>void
  • 用法：
fApi.refresh()

# 隐藏表单

type hideForm = (hide:Boolean)=>void
  • 用法：
fApi.hideForm(true)

# 重载表单

interface reload{
    ():void
    (rules:FormRule[]):void
}
  • 用法：
fApi.reload()

# 销毁表单

type destroy = () => void
  • 用法：
fApi.destroy()

# 表单渲染后回调

type nextTick = (callback:Function) => void
  • 用法：
fApi.nextTick(() => {
    //todo 渲染回调
})

# 自动刷新

callback执行后如果表单没刷新, 会自动刷新表单渲染

type nextRefresh = (callback:Function) => void
  • 用法：
fApi.nextRefresh(() => {
    //todo 表单操作
})

# 提交表单

type submit = (success?: (formData: FormData, $f: fApi) => void, fail: ($f: fApi) => void)=> void
  • 用法：
fApi.submit((formData, fapi) => {
    //todo 提交表单
},()=>{
    //todo 表单验证未通过
})

# 获取表单json规则

type toJson = () => string
  • 用法：
const jsonString = fApi.toJson()

# 触发表单事件

type emit = (emitName:string, ...args:any[]) => void
  • 用法：
fApi.emit('custom', 1)

# 监听表单事件

  • 参数：

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

  • 用法：

    /*
rule:{
  field:'goods-name'
  //...
  emit:['on-change']
}
*/

fApi.on('goods-name-on-change',() => {
  //TODO
})

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

  • 参数：

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

  • 用法：

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

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

# 移除表单事件监听器

  • 参数：

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

  • 用法：

    移除自定义事件监听器。

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

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

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

    fApi.off('goods-name-on-change')
// fApi.off('goods-name-on-change', fn)

# fApi.set

  • 参数：

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

  • 用法：

    fApi.set(field.rule.col,'span',12)

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