form-create

# 组件联动

可以通过control配置项实现通过组件的值控制其他组件是否显示

# 数据结构

type Control =  Array<{
  //通过内置条件控制,和`handle`二选一
  value?: any;
  //内置的条件,可以和`value`组合使用
  condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween' | 'empty' | 'notEmpty';
  //自定义控制条件
  handle?: (val: any, api: Api) => boolean;
  //控制对应规则的显示,禁用,必填
  method?: 'display' | 'disabled' | 'hidden' | 'required';
  //控制的字段
  rule: string[];
} | {
  //通过内置条件控制,和`handle`二选一
  value?: any;
  //内置的条件,可以和`value`组合使用
  condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween' | 'empty' | 'notEmpty';
  //自定义控制条件
  handle?: (val: any, api: Api) => boolean;
  //控制的规则
  rule: Rule[];
  //条件达成时,将`rule`添加到对应字段后面
  append?: string;
  //条件达成时,将`rule`添加到对应字段前面
  prepend?: string;
  //条件达成时,将`rule`添加到对应字段的子级, 不配置`append`和`prepend`时,默认当前规则
  child?: boolean;
}>

method

  • display: 控制显示
  • hidden: 控制渲染
  • required: 控制必填
  • disabled: 控制禁用

condition

  • ==: 全等
  • !=: 不全等
  • <>: 不全等
  • >: 组件值大于value(Number)
  • >=: 组件值大于等于value(Number)
  • >=: 组件值大于等于value(Number)
  • <: 组件值小于value(Number)
  • <=: 组件值小于等于value(Number)
  • in: 组件值存在于value(Array)中
  • notIn: 组件值不存在于value(Array)中
  • on: value存在于组件值(Array)中
  • notOn: value不存在于组件值(Array)中
  • between: 组件值在value(Array)的区间中,组件值>value[0] && 组件值<value[1]
  • notBetween: 组件值不在value(Array)的区间中
  • empty: 组件值为空时
  • notEmpty: 组件值不为空时

# 属性说明

  • value : 当组件的值和value全等时显示rule中的组件

    {
    value:1,
    rule:[...]
}

  • handle Function : 当handle方法返回true时显示rule中的组件

    {
    handle:function(val, fApi){
        return val === 1
    },
    rule:[...]
}

  • rule Array<rule> : 该组件控制显示的组件

    {
    value:1,
    rule:[
        maker.number('满额包邮','postage_money',0)
    ]
}

  • rule Array<string> : 当前规则中的field/name v2.5.10+

    {
    value: 1,
    rule: ['field1', 'name2']
}

  • append string : 设置rule中的规则追加的位置v2.5.0+

    {
    value:1,
    append:'goods_name'
}

  • prepend string : 设置rule中的规则前置插入的位置v2.5.0+

    {
    value:1,
    prepend:'goods_name'
}

  • child boolean : 设置rule 是否插入到指定位置的children中,默认添加到当前规则的 children 中v2.5.0+

    {
    value:1,
    prepend:'goods_name',
    child: true
}

注意

  • handle优先级大于value
  • 所有符合条件的 control 都会生效, v2.5版本之前只有第一个生效

# handle示例

当评价小于3星时输入差评原因

# apppend示例v2.5.0+

当input3输入值后插入text4

# child示例v2.5.0+

当输入 append时追加插槽

# 组合示例v2.5.0+

同时多个control生效

← update回调 →