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

乐吾乐科技2024-06-23 11:34

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

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

乐吾乐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);
});