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

弹框

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

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

通过visible属性实现弹框

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

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

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

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

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

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

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

项目地址

弹窗的显示/隐藏

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

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

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

② 运行查看结果。

项目地址

弹窗的显示/隐藏

通过消息机制自定义弹窗

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

相关推荐
徐小夕2 分钟前
万字分享:为什么我们要自研Word解析引擎?JitWord 解析引擎 4.0 深度复盘
前端·vue.js·github
陈随易11 分钟前
副业搞钱点子之独立开发
前端·后端·程序员
console.log('npc')20 分钟前
问题跟踪与知识沉淀:从任务到知识的闭环)
前端·javascript·人工智能
半杯咖啡半行码22 分钟前
QML与 Qt Quick入门实战:从零基础到 C++ 双向通信详解
java·qt·交互
恋猫de小郭39 分钟前
最近 Android 有什么更新:Android Dev Summit 2026 技术解读
android·前端·flutter
钛生智能39 分钟前
OA 流程定制全参数详解(十):画流程图与美化——从“能跑”到“好看”的最后一公里
流程图·办公自动化·oa·协同办公·oa办公系统
计算机魔术师41 分钟前
Reddit 宣布转向以登录为主的体验,以应对 AI 搜索带来的流量下滑
前端
熊猫钓鱼>_>41 分钟前
上架审核常见驳回与隐私合规清单:过审前先自查这 8 条【鸿蒙心迹】
开发语言·前端·华为·华为云·harmonyos·openharmony·ai制作
missile11142 分钟前
# HDR 算法 ISP 通路客制化方案(G100 / mt6789)
java·前端·javascript
孙琦Ray1 小时前
Speedb 数据引擎转向开源,RocksDB 替代方案迎来新竞争
数据库·开源·rocksdb·键值存储·speedb