概述
以上我們了解了布局后众、樣式胀糜、組件和數(shù)據(jù)的相關(guān)知識(shí),但都是操作獨(dú)立的組件蒂誉,那么如果組件之前需要有互動(dòng)效果該如何處理呢教藻?
這里就引入了“藍(lán)圖”的功能,藍(lán)圖可以理解是一種可視化的編程手段(低代碼)右锨,可以處理視圖上各個(gè)模塊或組件之間的關(guān)系
示例
下面我們用項(xiàng)目中一個(gè)需求來做示例簡(jiǎn)單了解一下藍(lán)圖的功能
需求分析括堤,當(dāng)用戶點(diǎn)擊地圖上的光柱時(shí)彈出信息框,當(dāng)用戶點(diǎn)擊關(guān)閉按鈕時(shí)關(guān)閉信息框
涉及到三個(gè)需要交互的節(jié)點(diǎn)光柱、信息框悄窃、關(guān)閉按鈕
1. 首先把光柱讥电、信息框、關(guān)閉按鈕導(dǎo)出到藍(lán)圖轧抗,并設(shè)置信息框初始狀態(tài)為隱藏恩敌,因?yàn)橹挥挟?dāng)發(fā)光柱點(diǎn)擊時(shí)信息框才會(huì)顯示出來
2. 完成以上操作,切換到藍(lán)圖視圖鸦致,可以看到剛剛導(dǎo)入的三個(gè)節(jié)點(diǎn)潮剪,柱子涣楷、關(guān)閉按鈕(關(guān)閉產(chǎn)業(yè)園)分唾、信息框(含谷智能制造產(chǎn)業(yè)園)
3. 接下來把這三個(gè)節(jié)點(diǎn)拖拽到藍(lán)圖畫布
4. 分析之前的需求,轉(zhuǎn)化成藍(lán)圖思路就是當(dāng)點(diǎn)擊柱子時(shí)顯示信息框狮斗,當(dāng)點(diǎn)擊關(guān)閉按鈕時(shí)隱藏信息框绽乔,按照這樣的思路在圖上把相應(yīng)的邏輯線連上就可了
預(yù)覽效果如下
藍(lán)圖的功能強(qiáng)大,組件模塊之間的交互和數(shù)據(jù)傳遞都可以通過藍(lán)圖實(shí)現(xiàn)碳褒,如需進(jìn)一步深入了解可以參考datav官方文檔藍(lán)圖章節(jié)
(本節(jié)完)