弹框实现方法、装置、电子设备、存储介质制造方法及图纸

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

The Realization Method, Device, Electronic Equipment and Storage Medium of Bomb Frame

【技术实现步骤摘要】
弹框实现方法、装置、电子设备、存储介质
本专利技术涉及计算机应用
，尤其涉及一种弹框实现方法、装置、电子设备、存储介质。
技术介绍
Modal弹框组件是当用户需要处理事务，又不希望跳转页面以致中断工作流程时，打开的一个浮层，承载相应的操作。随着react(react是一个采用声明式，高效而且灵活的用来构建用户界面的框架)技术越来越被更多人使用并关注，目前被广泛使用的react组件库主要有两种：实现了Google'sMaterialDesign设计规范的material-ui和蚂蚁金服的的ant-design。Material-UI是一个实现了Google'sMaterialDesign设计规范的react组件库，开箱即用，使用它可以快速搭建出赏心悦目的应用界面。ant-design服务于企业级产品的设计体系，基于确定和自然的设计价值观上的模块化解决方案，让设计者和开发者专注于更好的用户体验。在以上所提到的两种组件库中，对于modal组件的实现都没有提供拖动以及缩放的配置接口，而这两种功能在很多场景是非常必要的。例如当用户在Modal中处理事务时想参照页面内容或直接复制一些信息时，目前现有的Modal组件无法满足这些需求，在操作上很受限制。
技术实现思路
本专利技术为了克服上述现有技术存在的缺陷，提供一种弹框实现方法、装置、电子设备、存储介质，以实现灵活的弹框。根据本专利技术的一个方面，提供一种弹框实现方法，包括：利用基于react的拖动组件库对基于react的缩放组件库进行封装以获得函数组件；对material-ui的对话框进行封装，获得第一模态框；利用所述第一模态框对所述函数组件进行封装获得第二模态框，所述第二模态框可拖动且可缩放地显示。可选地，所述对material-ui的对话框进行封装，获得第一模态框还包括：所述第一模态框提供信息方法、成功方法、出错方法、警告方法及确认方法中的一个或多个方法。可选地，所述对material-ui的对话框进行封装，获得第一模态框还包括：通过基于react的转变库配置所述第一模态框弹出时的显示效果。可选地，所述第二模态框经由触发于一页面上弹出，所述第二模态框弹出期间，所述页面允许交互操作。可选地，所述页面配置有第一类内容及第二类内容，所述第一类内容不允许被所述第二模态框遮挡，所述第二类内容允许被所述第二模态框遮挡，所述第二模态框于所述页面上弹出时，确定所述第二模态框弹出时于页面上的弹框位置，基于所述弹框位置调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡。可选地，接收对所述第二模态框的拖动操作，实时确定所述第二模态框于页面上的弹框位置，基于所述弹框位置动态调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡。可选地，接收对所述第二模态框的缩放操作，实时确定所述第二模态框于页面上的弹框位置及覆盖范围，基于所述弹框位置及覆盖范围动态调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被所述第二模态框遮挡。根据本专利技术的又一方面，还提供一种弹框实现装置，包括：函数组件模块，用于利用基于react的拖动组件库对基于react的缩放组件库进行封装以获得函数组件；第一模态框模块，用于对material-ui的对话框进行封装，获得第一模态框；第二模块框模块，用于利用所述第一模态框对所述函数组件进行封装获得第二模态框，所述第二模态框可拖动且可缩放地显示。根据本专利技术的又一方面，还提供一种电子设备，所述电子设备包括：处理器；存储介质，其上存储有计算机程序，所述计算机程序被所述处理器运行时执行如上所述的步骤。根据本专利技术的又一方面，还提供一种存储介质，所述存储介质上存储有计算机程序，所述计算机程序被处理器运行时执行如上所述的步骤。相比现有技术，本专利技术的优势在于：相对于普通的Modal(模态框)弹框提供了丰富的功能，更具灵活性。通过对基本Dialog(对话)的封装实现了通过简单属性配置即具有拖动以及缩放功能的弹框。当面对这样的需求时，开发人员无需再花费额外的精力便能够轻松实现想要的效果，因而大大提高开发的效率。附图说明通过参照附图详细描述其示例实施方式，本专利技术的上述和其它特征及优点将变得更加明显。图1示出了根据本专利技术实施例的弹框实现方法的示意图。图2示出了根据本专利技术实施例的弹框实现装置的示意图。图3示意性示出本公开示例性实施例中一种计算机可读存储介质示意图。图4示意性示出本公开示例性实施例中一种电子设备示意图。具体实施方式现在将参考附图更全面地描述示例实施方式。然而，示例实施方式能够以多种形式实施，且不应被理解为限于在此阐述的范例；相反，提供这些实施方式使得本公开将更加全面和完整，并将示例实施方式的构思全面地传达给本领域的技术人员。所描述的特征、结构或特性可以以任何合适的方式结合在一个或更多实施方式中。此外，附图仅为本公开的示意性图解，并非一定是按比例绘制。图中相同的附图标记表示相同或类似的部分，因而将省略对它们的重复描述。附图中所示的一些方框图是功能实体，不一定必须与物理或逻辑上独立的实体相对应。可以采用软件形式来实现这些功能实体，或在一个或多个硬件模块或集成电路中实现这些功能实体，或在不同网络和/或处理器装置和/或微控制器装置中实现这些功能实体。为了解决现有技术的缺陷，以实现灵活的弹框,本专利技术提供一种弹框实现方法、装置、电子设备、存储介质。首先参见图1，图1示出了根据本专利技术实施例的弹框实现方法的示意图。弹框实现方法包括如下步骤：步骤S110：利用基于react的拖动组件库对基于react的缩放组件库进行封装以获得函数组件；步骤S120：对material-ui的对话框进行封装，获得第一模态框；步骤S130：利用所述第一模态框对所述函数组件进行封装获得第二模态框，所述第二模态框可拖动且可缩放地显示。在本专利技术提供的弹框实现方法中，相对于普通的Modal(模态框)弹框提供了丰富的功能，更具灵活性。通过对基本Dialog(对话)的封装实现了通过简单属性配置即具有拖动以及缩放功能的弹框。当面对这样的需求时，开发人员无需再花费额外的精力便能够轻松实现想要的效果，因而大大提高开发的效率。具体而言，react的拖动组件库又称为react-draggable库。react的缩放组件库又称为re-resizable库。在一个具体实施例中，可拖拽以及可放大缩小的函数组件实现过程如下：首先缩放组件库接受一个组件(需实现缩放以及拖拽的组件)将其作为自己子参数(children参数)进行包裹得到可缩放组件，然后再用拖动组件库包裹可缩放组件得到上述函数组件。具体而言，所述步骤S120可以基于Material-UI，能够实现Material-UI对话框(Dialog)中提供的全部接口。具体而言，所述步骤S120对material-ui的对话框(Dialog)进行封装，获得第一模态框还可以包括如下步骤：所述第一模态框提供信息方法(info)、成功方法(success)、出错方法(error)、警告方法(warning)及确认方法(confirm)中的一个或多个方法。不同的方法定义了不同类型的的模态框，例如基于不同的触发信息提供不同类型的模态框，且本文档来自技高网...

【技术保护点】
1.一种弹框实现方法，其特征在于，包括：利用基于react的拖动组件库对基于react的缩放组件库进行封装以获得函数组件；对material‑ui的对话框进行封装，获得第一模态框；利用所述第一模态框对所述函数组件进行封装获得第二模态框，所述第二模态框可拖动且可缩放地显示。

【技术特征摘要】
1.一种弹框实现方法，其特征在于，包括：利用基于react的拖动组件库对基于react的缩放组件库进行封装以获得函数组件；对material-ui的对话框进行封装，获得第一模态框；利用所述第一模态框对所述函数组件进行封装获得第二模态框，所述第二模态框可拖动且可缩放地显示。2.如权利要求1所述的弹框实现方法，其特征在于，所述对material-ui的对话框进行封装，获得第一模态框还包括：所述第一模态框提供信息方法、成功方法、出错方法、警告方法及确认方法中的一个或多个方法。3.如权利要求2所述的弹框实现方法，其特征在于，所述对material-ui的对话框进行封装，获得第一模态框还包括：通过基于react的转变库配置所述第一模态框弹出时的显示效果。4.如权利要求1所述的弹框实现方法，其特征在于，所述第二模态框经由触发于一页面上弹出，所述第二模态框弹出期间，所述页面允许交互操作。5.如权利要求4所述的弹框实现方法，其特征在于，所述页面配置有第一类内容及第二类内容，所述第一类内容不允许被所述第二模态框遮挡，所述第二类内容允许被所述第二模态框遮挡，所述第二模态框于所述页面上弹出时，确定所述第二模态框弹出时于页面上的弹框位置，基于所述弹框位置调整所述第一类内容及所述第二类内容的排布，使得所述第一类内容不被...

【专利技术属性】
技术研发人员：李雅男，
申请(专利权)人：携程旅游信息技术上海有限公司，
类型：发明
国别省市：上海,31