lowcode-engine 中 Modal 类组件 hidden 属性被强制设置 true 怎么处理【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine在 lowcode-engine 搭建页面时Modal 类弹窗组件的hidden属性可能会被强制设置为true。它的直接后果是Modal 组件在预览的时候不渲染也就无法获取到实例。官方 FAQ Modal 类组件 hidden 属性被强制设置 true 给出的处理方式有两条路径推荐升级到 Engine 1.0.11 以上如果无法升级则通过新增 Save 态的属性管道处理函数在导出 schema 时把hidden这个 prop 去掉并改用 Save 态导出 schema。先确认现象是否一致处理之前先确认问题现象与 FAQ 描述一致弹窗组件在预览渲染态中不渲染由于不渲染无法拿到组件实例无法通过实例调用弹窗的 open 等 API。如果现象一致问题根因就是hidden属性残留在了用于预览/渲染的 schema 中。另外注意一点弹窗本身正确的弹出方式不是靠改hidden属性而是通过按钮绑定事件打开详见下文补充弹窗的正确弹出方式。方案一推荐升级 Engine 到 1.0.11 以上FAQ 给出的推荐做法是升级到 Engine Version 1.0.11 以上。这是官方标注为【推荐】的处理方式。如果当前工程使用的引擎版本低于 1.0.11优先评估升级升级完成后弹窗组件在预览态的渲染行为由新版引擎保证不需要再额外写处理逻辑。方案二新增 Save 态的属性管道处理函数去掉 hidden props当前版本无法升级时FAQ 的替代方案是新增 Save 态的 propsReducer将 hidden props 去掉。对应的实际 API 是 project 文档 中的addPropsTransduceraddPropsTransducer( transducer: IPublicTypePropsTransducer, stage: IPublicEnumTransformStage, ): void;它的作用是增加一个属性的管道处理函数stage指定在哪个转换阶段生效。IPublicTypePropsTransducer的定义见 props-transducer.ts签名是(props, node, ctx?) props可以返回处理后的 props。FAQ 给出的完整插件示例代码如下import { project } from alilc/lowcode-engine; import { IPublicEnumTransformStage } from alilc/lowcode-types; export const deleteHiddenTransducer (ctx: any) { return { name: deleteHiddenTransducer, async init() { project.addPropsTransducer((props: any): any { delete props.hidden; return props; }, IPublicEnumTransformStage.Save); }, }; } deleteHiddenTransducer.pluginName deleteHiddenTransducer;说明delete props.hidden只作用于IPublicEnumTransformStage.Save阶段即导出/保存时生效不会改动设计态里画布上的显示状态。project API 文档 中附带的示例DeleteHiddenTransducer写法略有不同从ctx里取projectconst { project } ctx;并使用IPublicTypeCompositeObject做类型标注。两种写法目标一致都是在保存的时候删除每一个组件的 props.hidden按你工程里插件上下文ctx的实际形态选用即可。导出 schema 使用 Save 态注册好管道处理函数后导出 schema 要显式指定 Save 态hidden的清理逻辑才会在导出时执行import { TransformStage } from alilc/lowcode-types; const schema project.exportSchema(TransformStage.Save);阶段枚举定义见 transform-stage.tsSave save、Render render等其中TransformStage已标记为deprecated建议改用IPublicEnumTransformStage两者取值一致。Save 与 Render 的区别在 Slot 组件渲染报错问题 中有说明TransformStage.Save代表渲染态的 schema其中不包含 Slot 组件默认的TransformStage.Render代表设计态的 schema其中包含 Slot 组件。也就是说用于预览/渲染的 schema 应当走 Save 态导出这正是hidden清理能够作用于预览链路的原因。验证方式执行上述exportSchemaSave 态后检查导出结果中弹窗组件节点props中不应再包含hidden字段——这是管道函数delete props.hidden的直接结果随后用该 Save 态 schema 预览弹窗组件可正常渲染并获取到实例。排查要点与边界该 transducer 只处理hidden这一个 prop且仅在 Save 阶段生效。设计态画布上弹窗仍然可以是隐藏状态这属于预期行为。Save 态 schema 不包含 Slot 组件设计态才有。如果你在渲染态遇到Slot 找不到之类的报错属于另一个问题处理方式见 Slot 组件渲染报错问题。FAQ 中的project.addPropsTransducer(...)代码直接从alilc/lowcode-engine导入project全局对象如果你的插件运行在插件上下文里可参考 API 文档中从ctx获取project的写法。补充弹窗的正确弹出方式FAQ 在开头特别提示弹窗的正确弹出方式请参考 如何通过按钮展示/隐藏弹窗即靠事件打开弹窗而不是依赖hidden属性控制。该文档的操作路径是拖拽一个按钮、一个弹窗点击弹窗在右侧面板高级中找到refId例如pro-dialog-entryl32xgrus实际值以你的画布为准点击工具栏的隐藏小图标将弹窗在画布中隐藏在按钮上绑定事件通过如下代码打开弹窗this.$(pro-dialog-entryl32xgrus).open();该文档同时注明这个方式依赖低代码弹窗组件是否对外保留了相关 API不同物料支持的方式不一样以上写法针对的是综合场景的弹窗物料。参考文档Modal 类组件 hidden 属性被强制设置 trueProject APIaddPropsTransducer / exportSchemaSlot 组件渲染报错问题Save/Render 态区别如何通过按钮展示/隐藏弹窗IPublicEnumTransformStage 枚举定义IPublicTypePropsTransducer 类型定义【免费下载链接】lowcode-engineAn enterprise-class low-code technology stack with scale-out design / 一套面向扩展设计的企业级低代码技术体系项目地址: https://gitcode.com/GitHub_Trending/lo/lowcode-engine创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考