[發明專利]彈框實現方法、裝置、電子設備、存儲介質

有效

• 申請號: 201910247695.6
• 申請日: 2019-03-29
• 公開（公告）號: CN109992268B
• 公開（公告）日: 2022-12-20
• 發明（設計）人: 李雅男
• 申請（專利權）人: 攜程旅游信息技術（上海）有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F8/71
• 代理公司: 上海隆天律師事務所 31282
• 代理人: 臧云霄;潘一諾

本發明提供一種彈框實現方法、裝置、電子設備、存儲介質，彈框實現方法包括：利用基于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的轉變庫配置所述第一模態框彈出時的顯示效果。

可選地，所述第二模態框經由觸發于一頁面上彈出，所述第二模態框彈出期間，所述頁面允許交互操作。

可選地，所述頁面配置有第一類內容及第二類內容，所述第一類內容不允許被所述第二模態框遮擋，所述第二類內容允許被所述第二模態框遮擋，所述第二模態框于所述頁面上彈出時，確定所述第二模態框彈出時于頁面上的彈框位置，基于所述彈框位置調整所述第一類內容及所述第二類內容的排布，使得所述第一類內容不被所述第二模態框遮擋。

可選地，接收對所述第二模態框的拖動操作，實時確定所述第二模態框于頁面上的彈框位置，基于所述彈框位置動態調整所述第一類內容及所述第二類內容的排布，使得所述第一類內容不被所述第二模態框遮擋。

可選地，接收對所述第二模態框的縮放操作，實時確定所述第二模態框于頁面上的彈框位置及覆蓋范圍，基于所述彈框位置及覆蓋范圍動態調整所述第一類內容及所述第二類內容的排布，使得所述第一類內容不被所述第二模態框遮擋。