在oinone平台中，弹窗、抽屉是用户界面设计中最为常见的，而对于开发者而言，能够监听弹窗的生命周期事件通常是十分重要的，因为它提供了一个机会去执行一些逻辑。在这篇文章中，我们将深入探讨如何监听弹窗、抽屉生命周期事件，并讨论一些可能的应用场景。
首先，我们来实现一个监听弹窗销毁的事件。
让我们看一下提供的代码片段：
// 1: 自定义打开弹窗的动作
@SPI.ClassFactory(
BaseActionWidget.Token({
actionType: [ActionType.View],
target: [ViewActionTarget.Dialog],
model: 'model',
name: 'name'
})
)
export class MyDialogViewActionWidget extends DialogViewActionWidget {
protected subscribePopupDispose = (manager: IPopupManager, instance: IPopupInstance, action) => {
// 自定义销毁弹窗后的逻辑
};
protected mounted() {
PopupManager.INSTANCE.onDispose(this.subscribePopupDispose.bind(this));
}
protected unmounted() {
PopupManager.INSTANCE.clearOnDispose(this.subscribePopupDispose.bind(this));
}
}
在上面的代码中，我们自定义了打开弹窗的动作，并且监听了弹窗销毁事件。
让我们逐步解析这段代码：
1: subscribePopupDispose 是一个函数，作为弹窗销毁事件的处理程序。它接收三个参数：manager、instance 和 action。
manager: 弹窗事件管理器
instance: 弹窗实例
action: 操作弹窗的动作，如果是点击弹窗右上角的关闭按钮，那action为null2: 组件挂载的时候，进行监听.
4: 最后组件销毁的时候需要清除对应的监听
那么，如果监听到弹窗销毁，我们可以执行什么样的逻辑呢？
1: 更新相关组件状态： 弹窗销毁后，可能需要更新其他组件的状态。通过 popupWidget 可以获取到弹窗相关的信息，进而执行一些状态更新操作。
2: 处理弹窗销毁时的数据或动作： 在 subscribePopupDispose 函数中，action 参数含一些关于弹窗销毁时的动作信息，如果是点击弹窗右上角的销毁按钮，那action为null。我们可以根据这些信息执行相应的逻辑，例如更新界面状态、保存用户输入等
3: 触发其他操作： 弹窗销毁后，可能需要触发一些后续操作，比如显示另一个弹窗、发起网络请求等。
完整的生命周期
| 方法名 | 功能描述 |
|---|---|
onPush(fn) |
监听 弹出窗口被推入时的事件处理器 |
clearOnPush(fn) |
清除onPush事件的监听 |
onCreated(fn) |
监听 弹出窗口创建时的事件处理器 |
clearOnCreated(fn) |
清除onCreated事件的监听 |
onOpen(fn) |
监听 弹出窗口打开时的事件处理器 |
clearOnOpen(fn) |
清除onOpen事件的监听 |
onClose(fn) |
监听 弹出窗口关闭时的事件处理器 |
clearOnClose(fn) |
清除onClose事件的监听 |
onDispose(fn) |
监听 弹出窗口被销毁时的事件处理器 |
clearOnDispose(fn) |
清除onDispose事件的监听 |
onDisposeAll(fn) |
监听 所有弹出窗口被销毁时的事件处理器 |
clearOnDisposeAll(fn) |
清除onDisposeAll事件的监听 |
结语
开发者可以更灵活地响应用户操作，提升用户体验。在实际项目中，根据应用需求和设计，可以根据以上优化逻辑定制具体的处理流程。希望这篇文章为你提供了更深入的理解。
Oinone社区 作者：汤乾华原创文章，如若转载，请注明出处：https://doc.oinone.top/frontend/4576.html
访问Oinone官网:https://www.oinone.top获取数式Oinone低代码应用平台体验
![[前端]平台内置的基类](https://doc.oinone.top/wp-content/themes/justnews/themer/assets/images/lazy.png)
