【乐吾乐2D可视化组态编辑器】弹框

很多同学问道:如何弹框。Meta2d.js只通知弹框,不直接弹框。

原因很简单,我们不知道用户需要什么样的弹框,弹框通常涉及具体业务数据,只有业务自己知道。

External Player - 哔哩哔哩嵌入式外链播放器

乐吾乐2D可视化组态编辑器地址:https://2d.le5le.com/

1. 定义弹框消息

在图元事件里面,发送一个自定义消息,在Vue/React或Js里面接收消息,显示一个自定义弹框。

复制代码
const pen = {
  name: "rectangle",
  text: "矩形",
  x: 100,
  y: 100,
  width: 100,
  height: 100,
  events: [
    {
      name: "click",
      action: EventAction.Emit, 
      value: "自定义弹框消息名",
      params: "消息参数"
    },
  ],
};

// 
enum EventAction {
  Link, 					// 打开链接
  SetProps,				// 设置属性
  StartAnimate,   // 执行动画
  PauseAnimate,   // 暂停动画
  StopAnimate,    // 停止动画
  Function,       // 执行JS代码
  WindowFn,       // 执行全局函数
  Emit,           // 发送消息
}

2. 监听弹框消息

在Vue/React或Js里面监听弹框消息。

复制代码
meta2d.on('自定义弹框消息名', (e) => {
    const pen = e.pen;
    const params = e.params;
  	// UI 弹框
    alert(pen.name + params);
});
相关推荐
梦想的初衷~2 分钟前
基于现代R语言【Tidyverse、Tidymodel】的机器学习方法
开发语言·机器学习·r语言
香蕉可乐荷包蛋5 分钟前
Python学习之路(十三)-常用函数的使用,及优化
开发语言·python·学习
挽淚11 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴12 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
惜.己13 分钟前
使用python的读取xml文件,简单的处理成元组数组
xml·开发语言·python·测试工具
sunbyte15 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
今禾19 分钟前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法
南篱23 分钟前
JavaScript 中的 this 关键字:从迷惑到精通
javascript
apihz37 分钟前
域名WHOIS信息查询免费API使用指南
android·开发语言·数据库·网络协议·tcp/ip
coding随想1 小时前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript