前端零程式碼-技術原理:對話方塊巢狀和自定義按鈕| uiotos致敬amis、appsmith、codewave、goview、dataroom、iotrouter、FUXA、樂吾樂、dooring等

一路火花带闪电Plus發表於2024-10-02

對話方塊有預設標題頭和腳,帶有預設的取消確定關閉等按鈕:

對話方塊編輯狀態和執行狀態

UIOTOS中對話方塊屬常見容器,內容由任意其他頁面巢狀而來。如下所示:

UIOTOS中對話方塊巢狀內容頁

UIOTOS中對話方塊巢狀內容頁

那麼問題來了,既然對話方塊內容可任意設計,樣式風格自帶的頭腳不匹配時,如何完全自定義?

UIOTOS支援隱藏預設頭腳,完全交由內嵌頁自定義外觀,支援內嵌頁按鈕設定指定標識,對應對話方塊的取消確定關閉等。如下所示:

UIOTOS自定義對話方塊外觀

這就完美了嗎?

不夠!如果對話方塊內容是長頁面,比如表單問卷,顯然還需要加一層滾動頁容器巢狀。

因此,UIOTOS中,除了直接內嵌頁按鈕能配置外,經滾動頁巢狀的更下層頁面按鈕,也同樣支援配置。如下所示:

對話方塊→滾動頁→長頁面

任意層按鈕都支援?

不行!也就是說,直接內嵌頁的按鈕,或者經過一層滾動頁再巢狀的,才被允許配置成彈窗按鈕。

因為要支援多級彈窗,否則二級彈窗關閉時,就會導致初始彈窗也關閉。如下所示:

UIOTOS二級彈窗

一定要用多層巢狀內的按鈕呢?

可以用UIOTOS中的繼承和連線來實現。在最上層對話方塊中,繼承目前內嵌頁按鈕的點選事件,連線指向自身,操作關閉等事件即可,如下所示:

內嵌按鈕連線操作,讓上層對話方塊關閉

關於

UIOTOS是一款前端零程式碼工具,首創頁面巢狀技術,可搭建業務系統大屏組態上位機HMI等複雜互動介面,實現與原型1:1的效果。

NodeRedAPIJSONIoT平臺,或其他低程式碼平臺等,形成前後端一體方案(有後端API介面即可),快速交付工業、IoT等專案。


示例:組態HMI


示例:業務系統


聯絡
上一篇前端零程式碼-原理:與巢狀頁面內的元件通訊

相關文章