【乐吾乐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);
});
相关推荐
s1533510 分钟前
C++STL-deque
开发语言·c++
一块plus10 分钟前
一门原本只是“试试水”的课程,没想到炸出了一群真诚的开发者
javascript·面试·github
yvvvy13 分钟前
🚀React + Vite 实战:打造智能单词学习应用
javascript
单休好_好就好在比双休少一天14 分钟前
Vite打包从12.17M -> 7.95M,速度提升≈51.85%
前端·javascript
yinke小琪14 分钟前
JavaScript DOM内容操作常用方法和XSS注入攻击
前端·javascript
然我16 分钟前
闭包在类封装中的神技:实现真正安全的私有属性,面试必懂的封装技巧
前端·javascript·面试
用户名12318 分钟前
Vue 页面快速跳转并打开源代码文件
javascript
爱编程的喵21 分钟前
深入理解JavaScript节流函数:从原理到实战应用
前端·javascript·html
尧木晓晓22 分钟前
开发避坑指南:Whistle 代理失效背后,localhost和 127.0.0.1 的 “爱恨情仇” 与终极解决方案
前端·javascript
Devil枫22 分钟前
Kotlin项目实战与总结
开发语言·jvm·kotlin