【乐吾乐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);
});
相关推荐
Hilaku1 分钟前
Vue 2与Vue 3响应式原理的对比与实现
前端·javascript·vue.js
自出洞来无敌手(曾令瑶)6 分钟前
浏览器 实时监听音量 实时语音识别 vue js
前端·javascript·vue.js·语音识别
巨人张7 分钟前
信息素养Python编程题
开发语言·python
Hilaku29 分钟前
“虚拟DOM”到底是什么?我们用300行代码来实现一个
前端·javascript·vue.js
阿猿收手吧!31 分钟前
【计算机网络】HTTP1.0 HTTP1.1 HTTP2.0 QUIC HTTP3 究极总结
开发语言·计算机网络
JAVA学习通32 分钟前
图书管理系统(完结版)
java·开发语言
paishishaba39 分钟前
处理Web请求路径参数
java·开发语言·后端
七七七七0740 分钟前
C++类对象多态底层原理及扩展问题
开发语言·c++
心.c1 小时前
react当中的this指向
前端·javascript·react.js