概述
以上我们了解了布局、样式、组件和数据的相关知识,但都是操作独立的组件,那么如果组件之前需要有互动效果该如何处理呢?
这里就引入了“蓝图”的功能,蓝图可以理解是一种可视化的编程手段(低代码),可以处理视图上各个模块或组件之间的关系

示例
下面我们用项目中一个需求来做示例简单了解一下蓝图的功能
需求分析,当用户点击地图上的光柱时弹出信息框,当用户点击关闭按钮时关闭信息框
涉及到三个需要交互的节点光柱、信息框、关闭按钮

1. 首先把光柱、信息框、关闭按钮导出到蓝图,并设置信息框初始状态为隐藏,因为只有当发光柱点击时信息框才会显示出来


2. 完成以上操作,切换到蓝图视图,可以看到刚刚导入的三个节点,柱子、关闭按钮(关闭产业园)、信息框(含谷智能制造产业园)

3. 接下来把这三个节点拖拽到蓝图画布

4. 分析之前的需求,转化成蓝图思路就是当点击柱子时显示信息框,当点击关闭按钮时隐藏信息框,按照这样的思路在图上把相应的逻辑线连上就可了

预览效果如下

蓝图的功能强大,组件模块之间的交互和数据传递都可以通过蓝图实现,如需进一步深入了解可以参考datav官方文档蓝图章节
(本节完)
网友评论