【乐吾乐大屏可视化组态编辑器】事件交互-弹框

弹框

在线使用:https://v.le5le.com/

实现弹窗效果有多种方式:1.通过控制图元的visible属性控制实现弹窗;2.内置iframe弹窗。3.通过meta2d消息机制通知弹窗显示。下面具体讲解:

通过visible属性实现弹框

利用meta2d可以控制图元的显示/隐藏(visible)。

① 首先可以在你想弹窗的位置去拖拽设计你弹框样式及内容,在设计的时候,为防止弹窗区域中其他图元的干扰,可以在结构中先隐藏其他图元。

为了统一去控制弹窗图元的显示/隐藏,需要给所有弹窗图元设置相同分组,这里叫dialog。

② 在弹窗外侧,给"弹窗一"按钮配置交互事件,实现控制弹窗的显示。

当然,因为弹窗底部是一个2d场景(iframe嵌入的页面),这里为了防止与2d场景事件冲突。动作还添加了更改底部2d场景的可操作区域属性,这个属性的介绍可详见:网页

③ 在弹窗图元中,给关闭按钮配置交互事件,去控制弹窗的隐藏。这里同样恢复了2d场景的可操作区域。

④ 点击运行,预览页面查看结果。

项目地址

弹窗的显示/隐藏

通过内置iframe弹窗实现的效果

因为我们不清楚用户具体业务,所以内置弹窗只提供了一个默认对话框。通过iframe嵌入一个网页实现。

① 选择"弹窗二"按钮,配置交互事件,配置标题和被嵌入网页地址。

② 运行查看结果。

项目地址

弹窗的显示/隐藏

通过消息机制自定义弹窗

meta2d通过点击事件发送消息,去通知弹窗的显示/隐藏。这种方式需要代码开发。详情可见 自定义弹窗

相关推荐
似夜晓星辰2 分钟前
用 Laya 决策模型(JEV 的开源实现)做一个智能家居决策 Demo
开源·智能家居
剪刀石头布啊4 分钟前
泛洪DFS、BFS
前端
qetfw4 分钟前
Windows Server AD CS:根 CA、Web 证书模板与域内自动注册
前端·windows·windows-server
剪刀石头布啊4 分钟前
为什么React组件很少前缀,而vue的不少组件都有前缀
前端
剪刀石头布啊10 分钟前
gird网格布局
前端
啃火龙果的兔子12 分钟前
Google Chrome(谷歌浏览器)常用快捷键
前端·chrome
剪刀石头布啊14 分钟前
js真的是单线程实现异步并发么?
前端
剪刀石头布啊19 分钟前
js中改变this指向的操作有哪些
前端
剪刀石头布啊19 分钟前
vue、react 列表中使用 index 作为 key 的话,修改某一个元素后会发生什么
前端
方方洛21 分钟前
glowglow:语言无关的语法高亮器是怎么实现的
前端·前端框架