FormCreate

# 组件联动

可以通过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回调 →