[发明专利]可扩展的多级触发弹出组件系统

说明书

本发明页面开发领域，公开了一种可扩展的多级触发弹出组件系统，解决普通的悬停弹出组件无法达到二级操作触发的问题。本发明包括触发组件和弹出组件，触发组件用于监听系统事件，当监听到的系统事件达到弹出组件的触发条件时，触发组件触发对应的弹出组件弹出并显示；并且，弹出后的弹出组件可作为触发组件并监听系统事件，当监听到的系统事件达到其下一级的弹出组件的触发条件时，弹出后的弹出组件将触发其下一级的弹出组件弹出并显示。本发明适用于页面前端开发。

技术领域

本发明涉及页面开发领域，特别涉及可扩展的多级触发弹出组件系统。

背景技术

在页面前端开发的过程中，弹出组件是一种常用的交互方式，有时需要更便捷、可拓展性更强的弹出组件，通常会使用到第三方框架或者插件的方式来开发。在页面开发中需要一种鼠标悬停触发弹出的组件，在弹出组件中实现显示信息、点击等二级操作，但是在二级操作与悬停触发方式相矛盾，导致普通的悬停弹出组件在鼠标移走后会自动消失，无法达到二级操作的触发。

发明内容

本发明要解决的技术问题是：提供一种可扩展的多级触发弹出组件系统，解决普通的悬停弹出组件无法达到二级操作的触发的问题。

为解决上述问题，本发明采用的技术方案是：可扩展的多级触发弹出组件系统，包括触发组件和弹出组件，触发组件用于监听系统事件，当监听到的系统事件达到弹出组件的触发条件时，触发组件触发对应的弹出组件弹出并显示；

本发明中，弹出后的弹出组件可作为触发组件并监听系统事件，当监听到的系统事件达到其下一级的弹出组件的触发条件时，弹出后的弹出组件将触发其下一级的弹出组件弹出并显示。

进一步的，为了便于满足组件的状态调整需求，作为触发组件的弹出组件在触发弹出组件前，首先设置一定时长的延时，并在延时过程中判断其在触发弹出组件之后的自身状态，延时结束后再触发相应的弹出组件并将自身状态调整相应的状态。

具体的，作为触发组件的弹出组件在触发弹出组件之后的自身状态包括可见状态和不可见状态；可见状态时，该弹出组件保持弹出，并继续作为触发组件并监听系统事件；不可见状态时，该弹出组件隐藏，同时终止监听系统事件。

进一步的，为了避免弹出组件长时间被占用，若作为触发组件的弹出组件在规定的时间内，未监听到的系统事件达到其下一级的弹出组件的触发条件，则将自身状态调整为不可见状态。

进一步的，所述系统事件可包括以下手动时间：click、hover、focus或者manual。

本发明的有益效果是：本发明通过向弹出后的弹出组件绑定其下一级的弹出组件的触发条件，让弹出后的弹出组件作为触发组件并监听系统事件，当监听到的系统事件达到其下一级的弹出组件的触发条件时，弹出后的弹出组件触发其下一级的弹出组件弹出并显示，实现二级操作的触发，由于本发明可采用手写触发方式的办法更改弹出底层逻辑实现多级操作的触发，不依赖第三方库，因此复用性高，扩展性高。

附图说明

图1是实施例的一级触发示意图。

图2是实施例的二级触发示意图。

具体实施方式

本发明针对目前多级弹出组件的逻辑矛盾的问题，公开了一种可扩展的多级触发弹出组件系统，采用手写触发方式的办法更改弹出底层逻辑实现多级弹出组件，将自动触发条件改为手动监听控制方式，当监听到对应的一级触发条件的时候开启二级触发条件的监听，如果没有触发二级条件，则一级触发关闭。