设置器自定义
属性设置器用于在配置面板中展示特定配置项的配置逻辑。Tango 内置了多种标准的属性设置器,对于一些特殊场景,内置的属性设置器可能无法满足你的需要,此时开发者可以扩展自己的属性设置。
设置器类型
Tango 的属性设置器分为两种类型:
- 值设置器(value setter): 设置器接收和返回的是一个具体的 javascript value 值,例如字符串、数字、布尔值、对象等。值设置器支持与代码设置器进行相互切换。
- 代码设置器(code setter): 设置器接收和返回的是一个 javascript 代码片段。
与之相对应的,在引擎的内核层,在解析属性值时,有两种策略:
- 基本类型会被直接解析为值,例如字符串、数字、布尔值等。
- 复杂类型会被解析为代码,例如函数、非标准对象、非标准数组等。
属性值的解析和设置流程如下图所示:
引擎如何区分字符串和代码片段
为了能够正确区分普通的字符串值和代码片段,Tango 引擎在解析过程中进行了区分。代码片段始终使用 "{{code}}"
进行包裹,例如 "{{() => {}}}"
。
引擎是如何解析对象的
对于简单的对象,例如 { key: 'value' }
,引擎会将其解析为值。而对于复杂的对象,例如函数、带计算的对象或数组、带引用的对象或数组,都会统一将其解析为代码片段。
内置的设置器
Value setter
对于值设置器而言,直接接收和返回具体的 javascript value 即可。
设置器名 | 接收值类型 | 说明和示例 |
---|---|---|
numberSetter | number | 数字值设置器 |
textSetter | string | 文本值设置器 |
boolSetter | boolean | true 或 false |
choiceSetter | string | 单选列表,多选一 |
selectSetter | string | 下拉选择器,多选一 |
actionListSetter | object[] | [{ key, label, ...}, ...] |
columnSetter | object[] | 表格列设置器 [{ key, dataIndex, title, ... }, ...] |
dateSetter | string | 日期值设置器 |
dateRangeSetter | string[] | 日期范围设置器 |
timeSetter | string | 时间值设置器 |
timeRangeSetter | string[] | 时间范围设置器 |
enumSetter | object | 枚举对象 { key1, key2, key3 } |
listSetter | object[] | 通用的对象列表设置器, [{ key }, ...] |
optionSetter | object[] | 选项列表设置器, [{ label, value }, ...] |
routerSetter | string | 路由设置器 |