lowcode-engine 预置设置器详解SelectSetter 枚举下拉选择器的配置与实现原理【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine本篇基于 lowcode-engine面向扩展设计的企业级低代码技术体系官方文档中的 SelectSetter 设置器说明展开。读完你将掌握SelectSetter 在预置设置器体系中的定位、mode/defaultValue/options三个配置项的完整语义与数据格式、其返回值类型以及从源码层面了解引擎如何根据物料元数据自动推断出 SelectSetter、如何通过 setters API 注册与获取该设置器的完整链路。SelectSetter 是什么SelectSetter 是 lowcode-engine 预置设置器Setter之一用于在限定的可选范围内进行选择核心能力是选择。它呈现为下拉框形式是枚举型数据设置器的典型代表。在 预置设置器列表 中它的定位如下预置 Setter返回类型用途SelectSetterstring | number | boolean枚举型数据设置器采用下拉的形式展现在设置器体系中SelectSetter 与同属枚举型的 RadioGroupSetter 互为补充前者适合选项较多、需要下拉收纳的场景后者以 tab 形式展现适合选项极少的场景。这一点可以直接从引擎的元数据转换逻辑中得到印证——当组件的某个属性被声明为oneOf即枚举类型时引擎会按选项数量自动选择下拉或 tab 形式详见下文「引擎如何自动推断」一节。SelectSetter 配置参数在物料 schema 的configure.props中为某个属性指定 SelectSetter 时可通过以下属性进行配置继承自官方文档的完整参数表属性名说明mode选择器模式可选值single、multiple、tagdefaultValue默认值options传入的数据源参数格式[ {label/title: 文字, value: text}, ...]对三个参数展开说明mode决定交互形态。single为单选下拉后选中一项即回填multiple为多选一次可选多项tag为标签式多选选中项以 tag 形式呈现便于删除与追加。defaultValue字段尚未被用户修改时展示的初始值。options可选值列表。每个选项至少包含value回填到属性上的实际值与展示用的label或title二选一即可官方格式写作{label/title: 文字, value: text}。value支持字符串、数字、布尔等类型这也是 SelectSetter 返回类型不局限于字符串的原因。一个典型的属性配置写法如下setter 的结构形式参考引擎转换函数中componentNameprops的组织方式见 parse-props.ts{ name: align, title: 对齐方式, propType: string, setter: { componentName: SelectSetter, props: { mode: single, defaultValue: left, options: [ { label: 左对齐, value: left }, { label: 居中对齐, value: center }, { label: 右对齐, value: right }, ], }, }, }返回类型SelectSetter 的返回类型为String | Number | Boolean且返回的是options中选项的value值而非展示用的 label/title。因此在设计options时应保证value是组件属性真正能接受的枚举值label/title只承担在设置面板中展示给人看的职责。引擎如何自动推断出 SelectSetter除了手动在物料 schema 中声明 setter 外lowcode-engine 还能根据物料元数据metadata自动推断。在 editor-skeleton 的元数据转换器 parse-props.ts 中propTypeToSetter函数对oneOf类型属性的处理逻辑为case oneOf: const dataSource ((propType as IPublicTypeOneOf).value || []).map((value, index) { const t typeof value; return { label: t string || t number || t boolean ? String(value) : value ${index}, value, }; }); const componentName dataSource.length 4 ? SelectSetter : RadioGroupSetter; return { componentName, props: { dataSource, options: dataSource }, isRequired, initialValue: dataSource[0] ? dataSource[0].value : null, };从这段源码可以确认三条实现事实枚举属性oneOf的可选值会被转换为{label, value}结构其中label由value直接String()化得到选项数量 4 时自动选用 SelectSetter否则选用 RadioGroupSetter——这正是两个枚举型设置器在官方文档中分工的来源自动推断时同时写入props.dataSource与props.options两者内容相同initialValue取第一个选项的value。这也解释了上文配置表中options与defaultValue的语义如何与引擎内部的数据结构对应手动声明时以options为准自动推断时引擎会额外补充dataSource与initialValue。注册与获取 SelectSetterSelectSetter 等预置设置器需要通过 setters API 注册到设计器中才能在物料设置面板里生效。引擎对外暴露的SettersAPI 实现见 packages/shell/src/api/setters.ts核心方法有getSetter(type: string)按类型获取已注册的 settergetSettersMap()获取全部已注册 setter 的 MapregisterSetter(typeOrMaps, setter?)注册一个或一组setter支持字符串类型名或{ [key: string]: ... }的批量映射形式。官方文档 setters API 给出了将官方内置 Setter 注册进设计器的完整示例import { setters, skeleton } from alilc/lowcode-engine; import { setterMap, pluginMap } from alilc/lowcode-engine-ext; import { IPublicModelPluginContext } from alilc/lowcode-types; const SetterRegistry (ctx: IPublicModelPluginContext) { return { name: ext-setters-registry, async init() { // 注册 setterMap含 SelectSetter 等预置设置器 setters.registerSetter(setterMap); }, }; }; SetterRegistry.pluginName SetterRegistry; await plugins.register(SetterRegistry);其中setterMap来自alilc/lowcode-engine-ext包批量注册后物料 schema 中声明的componentName: SelectSetter才能在属性面板中解析为对应的下拉组件。更多 setter 相关说明可参考 设置器使用指南 与 设置器 API 文档。小结与延伸阅读SelectSetter 的职责单一而明确在options限定的范围内选择返回选中项的valueString | Number | Boolean三个配置项——modesingle/multiple/tag、defaultValue、options——覆盖了交互形态、初始值与数据源的全部定制需求引擎侧的propTypeToSetter会为选项数 4 的oneOf属性自动推断出 SelectSetter无需手动声明通过setters.registerSetter/setters.getSetter可以完成注册与按需获取。相关文档SelectSetter 原文档、预置设置器列表、同类型设置器 RadioGroupSetter。【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考