# radio

# `Schema`类静态属性

Schema类静态属性请访问 Schema.js类静态属性及值逻辑与事件逻辑关系

{
  widget: 'radio',
  title: '单选框',
  preview: '',
  type: ['string', 'number'],
  validators: [],
  logic: {
    value: ['=', '!='],
    event: []
  }
}

1
2
3
4
5
6
7
8
9
10
11

# `schema.default`

默认''

# `schema.option`定义

schema完整定义请访问schema

{
  type: "static",          // 可选项数据来源方式，可选：static、dynamic
  data: [{                 // 当type为static时，可选项数据源，为{key, value}键值对
    key: "A",
    value: "A选项"
  }],
  direction: "horizontal", // 选项排列方式，horizontal为水平方向，vertical为垂直方向排列，默认水平
  url: "",                 // 当type为 dynamic 时，接口地址
  adapter: "",             // 当type为 dynamic 时，适配脚本，使用见下方
  dynamicData: []          // 当type为 dynamic 时，可选项数据源，经过 adapter 转换之后
}

1
2
3
4
5
6
7
8
9
10
11

# `adapter`使用说明

示例

需求：通过 http://mock.com/list 接口返回作为可选项

{
  type: "dynamic",
  data: [],
  direction: "horizontal",
  url: "http://mock.com/list",
  adapter: "",
  dynamicData: []
}

1
2
3
4
5
6
7
8

假设 http://mock.com/list 返回值为

[
  { id: 2, name: 'tom'},
  { id: 3, name: 'lilei'},
  ...
]

1
2
3
4
5

dynamicData 必须为 {key, value} 键值对列表，所以adapter可以这么写:

return data.map(function(item){
  return {key: item.id, value: item.name}
})

1
2
3

TIP

关于adapter如何写？以及adapter可用的内置方法可参考 Worker

转换之后 dynamicData 的数据为：

[
  { key: 2, value: 'tom'},
  { key: 3, value: 'lilei'},
  ...
]

1
2
3
4
5

于是得到schema.option如下:

{
  type: "dynamic",
  data: [],
  direction: "horizontal",
  url: "http://mock.com/list",
  adapter: "return data.map(function(item){return {key: item.id, value:  item.name}})",
  dynamicData: []
}

1
2
3
4
5
6
7
8

adapter注意

最后必须return出数组
adapter内部被注入的data变量为接口返回值，可以根据此变量执行map操作返回，结果会自动传给dynamicData
return的数组必须为 {key, value} 键值对列表，key用于最终表单值，value用于显示

# 示例展示

# 静态数据示例

完整示例 codeSandbox (opens new window)

schema

{
  "key": "kZSgpj0ge",
  "widget": "radio",
  "hidden": false,
  "option": {
    "type": "static",
    "direction": "horizontal",
    "url": "",
    "adapter": "",
    "data": [
      {
        "key": "male",
        "value": "男"
      },
      {
        "key": "female",
        "value": "女"
      }
    ],
    "dynamicData": []
  },
  "name": "gender",
  "type": "string",
  "label": "性别",
  "description": "",
  "help": "",
  "disabled": false,
  "rules": [
    {
      "required": false,
      "message": "必填",
      "type": "string",
      "trigger": "change"
    }
  ],
  "placeholder": ""
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

# 动态数据示例

完整示例 codeSandbox (opens new window)

schema

{
  "key": "k1SULkhk1",
  "widget": "radio",
  "hidden": false,
  "option": {
    "type": "dynamic",
    "direction": "horizontal",
    "url": "https://nx2yz.csb.app/radio-dynamic.json",
    "adapter": "return data.map(function(item){ return { key: item.id, value: item.name }})",
    "data": [],
    "dynamicData": []
  },
  "name": "supervisor",
  "type": "string",
  "label": "主管",
  "description": "",
  "help": "",
  "disabled": false,
  "rules": [
    {
      "required": false,
      "message": "必填",
      "type": "string",
      "trigger": "change"
    }
  ],
  "placeholder": "请选择"
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

# 表单值类型示例

完整示例 codeSandbox (opens new window)

WARNING

请仔细观察示例表单值类型及下方schema高亮部分

schema.option.type 为 dynamic时，与实例中为static一样

schema

[
  {
    "key": "kZSgpj0ge",
    "widget": "radio",
    "hidden": false,
    "option": {
      "type": "static",
      "direction": "horizontal",
      "url": "",
      "adapter": "",
      "data": [
        {
          "key": "male",
          "value": "男"
        },
        {
          "key": "female",
          "value": "女"
        }
      ],
      "dynamicData": []
    },
    "name": "gender",
    "type": "string",
    "label": "性别",
    "description": "",
    "help": "",
    "disabled": false,
    "rules": [
      {
        "required": false,
        "message": "必填",
        "type": "string",
        "trigger": "change"
      }
    ],
    "placeholder": ""
  },
  {
    "key": "kZSgpj0qe",
    "widget": "radio",
    "hidden": false,
    "option": {
      "type": "static",
      "direction": "horizontal",
      "url": "",
      "adapter": "",
      "data": [
        {
          "key": 1,
          "value": "id为1"
        },
        {
          "key": 2,
          "value": "id为2"
        }
      ],
      "dynamicData": []
    },
    "name": "id",
    "type": "number",
    "label": "ID",
    "description": "",
    "help": "",
    "disabled": false,
    "rules": [
      {
        "required": false,
        "message": "必填",
        "type": "number",
        "trigger": "change"
      }
    ],
    "placeholder": ""
  }
]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

这里可选项列表表示schema.option.data或schema.option.dynamicData

可以看出因为Schema.type等于['string', 'number']，所以 schema.type的可选值只有2种，因此与schema.rule[0].type保持一致

← autoComplete checkbox →