研发背景 (Background)
在 Mendix 开发中，当用户执行“删除”、“提交”等敏感操作时，通常需要进行二次确认。Mendix 原生的做法是弹出一个全局的模态框 (Popup Window) 或者使用浏览器自带的 window.confirm()。
然而，这两种方式在现代 Web 应用中存在明显的体验缺陷：
- 全局模态框过于沉重，打断了用户的心流。
- 浏览器自带的 Confirm 样式陈旧，无法与企业级 UI 保持一致。
为了提供一种更轻量、更优雅的防误触交互，我们将 Ant Design 的 Popconfirm (气泡确认框) 组件引入到了 Mendix 中。
技术挑战与痛点 (The Challenge)
开发这个组件的核心难点在于 “插槽嵌套 (Widgets within Widgets)” 与 “事件拦截”：
- 内容包裹：Popconfirm 需要包裹一个触发元素（通常是一个按钮）。在 Mendix 中，这意味着我们的组件必须支持接受其他的 Mendix Widgets 作为子节点。
- 事件流控制：当用户点击被包裹的按钮时，不能直接触发按钮原有的 Action，而是需要先弹出气泡；只有当用户在气泡中点击“确认”后，才执行真正的业务逻辑。
我们的解决方案 (Our Solution)
我们利用 React 的 cloneElement 和 Mendix 的 ActionValue API 完美解决了上述问题。
1. 无缝的插槽体验
开发者可以在 Studio Pro 中，将任意的 Mendix 组件（如原生 Button、文本、图标，甚至是前面提到的 Mx Antd Button）拖入到 Popconfirm 的包裹区域（DropZone）中。组件会自动接管子元素的点击事件。
2. 丰富的可定制性
- 文本定制：支持自定义气泡的主标题（Title）和详细描述（Description）。
- 按钮定制：确认/取消按钮的文字、样式（如将确认按钮设为 Danger 红色）均可独立配置。
- 位置控制：支持 12 种弹出方位（如 TopLeft, BottomRight 等），自动适应页面边缘，防止遮挡。
3. 异步操作支持
气泡的“确认”按钮完美接入了 Mendix 的 Action 机制。如果绑定的 Microflow 是一个耗时操作，确认按钮会自动显示 Loading 状态，直到后端执行完毕气泡才会关闭。
开源价值与影响 (Open Source Impact)
- 🎨 交互体验升级：为 Mendix 应用带来了媲美顶级 SaaS 产品的细腻交互体验。
- ⏱️ 减少开发心智负担：开发者不再需要为了一个简单的确认提示去专门画一个 Popup 页面。
- 🤝 开源回馈：该组件同样作为 Mendix-Antd 开源生态的一部分，完全免费开放。
体验与使用 (Try it out)
在线体验 (Demo)：Mendix Antd Widget Demo
获取源码 (GitHub)：GavinCnod/mendix-antd-popconfirm
安装指南
- 从 GitHub Release 下载
.mpk文件。 - 将其放置在您的 Mendix 项目目录
{YourMendixProjectFolder}/widgets/下。 - 在 Studio Pro 中同步项目，将组件拖入页面，并在其内部放入一个按钮即可。