[发明专利]弹框实现方法、装置、电子设备、存储介质

说明书

本发明提供一种弹框实现方法、装置、电子设备、存储介质，弹框实现方法包括：利用基于react的拖动组件库对基于react的缩放组件库进行封装以获得函数组件；对material‑ui的对话框进行封装，获得第一模态框；利用所述第一模态框对所述函数组件进行封装获得第二模态框，所述第二模态框可拖动且可缩放地显示。本发明提供的弹框实现方法及装置实现灵活的弹框。

技术领域

本发明涉及计算机应用技术领域，尤其涉及一种弹框实现方法、装置、电子设备、存储介质。

背景技术

Modal弹框组件是当用户需要处理事务，又不希望跳转页面以致中断工作流程时，打开的一个浮层，承载相应的操作。随着react(react是一个采用声明式，高效而且灵活的用来构建用户界面的框架)技术越来越被更多人使用并关注，目前被广泛使用的react组件库主要有两种：实现了Google's Material Design设计规范的material-ui和蚂蚁金服的的ant-design。

Material-UI是一个实现了Google's Material Design设计规范的react组件库，开箱即用，使用它可以快速搭建出赏心悦目的应用界面。

ant-design服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。

在以上所提到的两种组件库中，对于modal组件的实现都没有提供拖动以及缩放的配置接口，而这两种功能在很多场景是非常必要的。例如当用户在Modal中处理事务时想参照页面内容或直接复制一些信息时，目前现有的Modal组件无法满足这些需求，在操作上很受限制。

发明内容

本发明为了克服上述现有技术存在的缺陷，提供一种弹框实现方法、装置、电子设备、存储介质，以实现灵活的弹框。

根据本发明的一个方面，提供一种弹框实现方法，包括：

利用基于react的拖动组件库对基于react的缩放组件库进行封装以获得函数组件；

对material-ui的对话框进行封装，获得第一模态框；

利用所述第一模态框对所述函数组件进行封装获得第二模态框，所述第二模态框可拖动且可缩放地显示。

可选地，所述对material-ui的对话框进行封装，获得第一模态框还包括：

所述第一模态框提供信息方法、成功方法、出错方法、警告方法及确认方法中的一个或多个方法。

可选地，所述对material-ui的对话框进行封装，获得第一模态框还包括：

通过基于react的转变库配置所述第一模态框弹出时的显示效果。

可选地，所述第二模态框经由触发于一页面上弹出，所述第二模态框弹出期间，所述页面允许交互操作。

可选地，所述页面配置有第一类内容及第二类内容，所述第一类内容不允许被所述第二模态框遮挡，所述第二类内容允许被所述第二模态框遮挡，所述第二模态框于所述页面上弹出时，确定所述第二模态框弹出时于页面上的弹框位置，基于所述弹框位置调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡。

可选地，接收对所述第二模态框的拖动操作，实时确定所述第二模态框于页面上的弹框位置，基于所述弹框位置动态调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡。

可选地，接收对所述第二模态框的缩放操作，实时确定所述第二模态框于页面上的弹框位置及覆盖范围，基于所述弹框位置及覆盖范围动态调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡。