lowcode-engine RadioGroupSetter 详解枚举型属性设置器的配置、取值与自动推导机制【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine本篇围绕 lowcode-engine 预置设置器之一RadioGroupSetter单选项组设置器展开它用于在属性面板中直观地展示一组可选项并让用户单选是搭建组件元数据时处理枚举型属性的首选设置器。读完本文你将掌握它的完整配置项defaultValue、options及其两种数据源格式、在configure.props中的标准写法、返回值的类型与取值规则以及引擎如何根据组件元数据的oneOf类型自动推导并生成RadioGroupSetter的底层实现机制。一、什么是 RadioGroupSetter定位与核心特性在 lowcode-engine 的设置器Setter体系中设置器负责把组件属性以合适的交互形式暴露给搭建用户。RadioGroupSetter的官方定位是用于直观的展示选择并选择——它以 tab单选项组的形式把有限个候选项平铺在属性面板中用户一眼可见全部选项点击即完成取值。官方文档中对它的描述如下见 RadioGroupSetter 文档 与 设置面板说明枚举型数据设置器采用 tab 选择的形式展现。这与下拉形式的SelectSetter形成互补二者返回类型相同string | number | boolean区别在于展现形态——RadioGroupSetter适合候选项少、需要所见即所选的场景SelectSetter适合候选项较多的场景。预置设置器列表中的对照如下预置 Setter返回类型用途RadioGroupSetterstring | number | boolean枚举型数据设置器采用 tab 选择的形式展现SelectSetterstring | number | boolean枚举型数据设置器采用下拉的形式展现二、setter 配置项详解根据官方文档RadioGroupSetter的配置项为属性名说明defaultValue默认值options传入的数据源参数格式:[{img: url, value: text, label/title: text}, ...]|[text, text, ...]2.1 options 的两种数据源格式options是RadioGroupSetter的核心配置决定属性面板中呈现哪些单选项。它支持两种写法对象数组格式推荐表达能力更强[ { img: https://example.com/icon.png, value: primary, label: 主按钮 }, { value: secondary, title: 次按钮 }, { value: warning, label: 警告按钮 } ]每个选项对象中value选项的真实取值。用户在设置器中点选后写入组件属性的就是该valuelabel/title选项在面板中显示的文案两者任一即可可配合国际化使用img可选选项的图标 URL用于在 tab 选项中展示图片/图标增强可辨识度。字符串数组格式简写适合纯文本枚举[左对齐, 居中, 右对齐]在这种简写形式下选项的展示文案与值即字符串本身。2.2 defaultValuedefaultValue指定设置器初始选中项应与options中某个value保持一致否则可能出现无选中态。三、实战在组件元数据中配置 RadioGroupSetter最典型的用法出现在组件元数据的configure.props中为组件的某个枚举型属性指定RadioGroupSetter作为设置器。以下示例取自官方元数据规范文档 metaSpec为一个组件手工补充size尺寸属性{ // ... configure: { isExtend: true, props: [ { title: 尺寸, name: size, setter: { componentName: RadioGroupSetter, isRequired: true, props: { options: [ { title: 大, value: large }, { title: 中, value: normal }, { title: 小, value: small } ] } } } ] } }几个关键点说明isExtend: true表示在自动推导出的属性列表基础上增量扩展属性若需要全量重写属性面板应改为isExtendsoverride的继承模式见 parse-props.ts 中对configure.props两种形态的处理setter.componentName指定设置器为RadioGroupSettersetter.isRequired声明该属性必填具体配置如options、defaultValue放在setter.props内透传给设置器组件用户在属性面板点选中后组件实例的size属性值即为字符串normal。四、自动推导机制oneOf 类型如何变成 RadioGroupSetter除了手工配置lowcode-engine 还能根据组件元数据中声明的属性类型自动推导出合适的设置器。这一机制实现在 packages/editor-skeleton/src/transducers/parse-props.ts 的propTypeToSetter函数中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, };从源码可以看出三条可验证的实现事实触发条件当属性propType为oneOf时推导器把oneOf.value数组逐项映射为{ label, value }形式的选项对 string / number / boolean 类型的候选值label直接取其字符串形式其他复杂类型则退化为value ${index}占位文案设置器选择阈值候选项数量 4时使用SelectSetter下拉形态 4时使用RadioGroupSettertab 形态——这与文档中tab 适合少候选项的定位完全吻合初始值自动填充推导出的initialValue取第一个选项的value即默认选中第一项并通过props.options同时冗余写入props.dataSource以兼容不同命名习惯下发给设置器。这意味着如果组件元数据只声明了propType: oneOf而不在configure.props中显式指定 setter引擎会自动为其生成一个带合理默认值的RadioGroupSetter开发者无需逐一手写。五、返回类型与取值规则文档明确给出RadioGroupSetter的返回类型String | Number | Boolean会返回 options 中的 value 值。也就是说设置器的值域完全由options中各项的value字段决定value是什么类型字符串、数字或布尔写回属性面板的值就是什么类型label/title/img仅用于展示不参与取值因此在为布尔型开关做开 / 关二选一、或为数字做0 / 1枚举时value可直接使用true/false、0/1出码与运行时行为将与原生类型一致。六、与 SelectSetter 的选型对照结合 预置设置器列表 中两个枚举型设置器的文档可以做如下选型判断维度RadioGroupSetterSelectSetter展现形态tab 单选项组选项全部平铺下拉选择器按需展开返回类型string | number | booleanstring | number | boolean取值规则返回 options 中的 value 值返回 options 中的 value 值特有配置defaultValue、options支持img/label/titlemodesingle / multiple / tag、defaultValue、options适用场景候选项少引擎自动推导阈值为 3 个以内、需要直观对比选项候选项多mode: multiple / tag支持多选与标签输入注意SelectSetter支持mode: multiple | tag的多选与标签模式而RadioGroupSetter是纯单选二者不可互相替代多选需求若某属性既要固定值又要可绑定变量则应使用MixedSetter包裹多种设置器见 metaSpec 文档相关章节。七、小结与延伸阅读RadioGroupSetter是 lowcode-engine 处理枚举型属性的核心设置器配置项简单defaultValueoptions但覆盖单选枚举的主要场景元数据中显式配置见 metaSpec 文档声明oneOf后由引擎自动推导见 parse-props.ts完整设置器矩阵及各自返回类型见 预置设置器列表设置器在属性面板中的整体行为属性面板渲染、必填校验等可结合 settings 面板文档 继续阅读。掌握以上配置与推导规则后你可以在组件物料开发中精确控制枚举属性的面板形态少候选项交给RadioGroupSetter平铺展示多候选项交给SelectSetter并始终通过options[].value控制写回属性的真实取值。【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考