target 主动联动

只有当前 value为100的时，才会展示 Select组件
主动联动的写法，target加上fulfill，$self可以取出当前字段的值

  • target + fulfill
  • $self
    1. const phone = {
    2. "type": "string",
    3. "title": "手机号",
    4. "required": true,
    5. "x-validator": "phone",
    6. "x-decorator": "FormItem",
    7. "x-component": "Input",
    8. "x-component-props": {
    9.   "prefix": "{{icon('PhoneOutlined')}}"
    10. },
    11. "x-reactions": {
    12.   // 主动受控，target加 fulfill，只有当前value为123的时候才会展示 Select
    13.   // 注意，可以修改受控者的哪个value
    14.   "target": 'Select',
    15.   "fulfill": {
    16.     "state": {
    17.     "visible": "{{$self.value=='100'}}",
    18.   }
    19. },
    20. },
    21. "name": "phone",
    22. "x-index": 0
    23. }

dependencies 被动联动

被动受控，dependencies 加 fulfill

  • dependencies
  • $deps
    1. const phone = {
    2. "type": "string",
    3. "title": "手机号",
    4. "required": true,
    5. "x-validator": "phone",
    6. "x-decorator": "FormItem",
    7. "x-component": "Input",
    8. "x-component-props": {
    9.   "prefix": "{{icon('PhoneOutlined')}}"
    10. },
    11. "x-reactions": {
    12.   "dependencies": ["username"],
    13.   // 组件内部的 state 双花括号是表达式
    14.   "fulfill": {
    15.     "state": {
    16.       "value": "{{$deps[0]}}",
    17.     }
    18.     },
    19. },
    20. "name": "phone",
    21. "x-index": 0
    22. }

x-validator 自定义校验

自定义校验，return 出去的表示校验不通过的提示

  1. const obj = {
  2.   "x-validator": `{{(value)=> {
  3.     if(value.length > 10) {
  4.         return 'Configure up to 10';
  5.     }
  6.     if(value.length < 1) {
  7.         return 'Configure at least one';
  8.     }
  9.   }}}`
  10. }

Radio 联动

image.png

  1. export const schema = {
  2.     "type": "object",
  3.     "properties": {
  4.       "rate": {
  5.         "type": "string | number",
  6.         "title": "打分",
  7.         "x-decorator": "FormItem",
  8.         "x-component": "Radio.Group",
  9.         "enum": [
  10.           {
  11.             "children": [],
  12.             "label": "总分",
  13.             "value": 1
  14.           },
  15.           {
  16.             "children": [],
  17.             "label": "多维度打分",
  18.             "value": 2
  19.           }
  20.         ],
  21.         "x-validator": [],
  22.         "x-component-props": {
  23.           "optionType": "button",
  24.           "buttonStyle": "solid"
  25.         },
  26.         "x-decorator-props": {},
  27.         "name": "rate",
  28.         "x-designable-id": "zd6iggh08j7",
  29.         "x-index": 0,
  30.         "default": 1
  31.       },
  32.       "total": {
  33.         "type": "object",
  34.         "x-validator": [],
  35.         "name": "total",
  36.         "title": "TOTAL",
  37.         "x-designable-id": "jwkzp4y6rhn",
  38.         "x-index": 1,
  39.         "x-reactions": {
  40.           "dependencies": [
  41.             {
  42.               "property": "value",
  43.               "type": "string | number",
  44.               "source": "rate",
  45.               "name": "rate"
  46.             }
  47.           ],
  48.           "fulfill": {
  49.             "state": {
  50.               "visible": "{{$deps.rate === 1}}"
  51.             }
  52.           }
  53.         },
  54.         "properties": {
  55.           "user": {
  56.             "type": "string",
  57.             "title": " 用户",
  58.             "x-decorator": "FormItem",
  59.             "x-component": "Input",
  60.             "x-validator": [],
  61.             "x-component-props": {},
  62.             "x-decorator-props": {},
  63.             "name": "user",
  64.             "x-designable-id": "7awrtm80f44",
  65.             "x-index": 0
  66.           },
  67.           "name": {
  68.             "type": "string",
  69.             "title": "名称",
  70.             "x-decorator": "FormItem",
  71.             "x-component": "Input",
  72.             "x-validator": [],
  73.             "x-component-props": {},
  74.             "x-decorator-props": {},
  75.             "name": "name",
  76.             "x-designable-id": "f3cvhpwhpj6",
  77.             "x-index": 1
  78.           }
  79.         }
  80.       }
  81.     },
  82.     "x-designable-id": "wopmqlnr176"
  83.   }

Select 联动

Segmented

image-20221012173428013.png

  1. export const schema = {
  2.   "type": "object",
  3.   "properties": {
  4.     "price": {
  5.       "type": "string",
  6.       "title": "费用",
  7.       "x-decorator": "FormItem",
  8.       "x-component": "Segmented",
  9.       "x-validator": [],
  10.       "x-component-props": {
  11.         "options": [{ "label": "免费", "value": 0 }, { "label": "收费", "value": 1 }]
  12.       },
  13.       "x-decorator-props": {},
  14.       "name": "price",
  15.       "x-designable-id": "29iv00vj3oy",
  16.       "x-index": 0
  17.     }
  18.   },
  19.   "x-designable-id": "3tdyjr137dx"
  20. }