阅读本文前请先阅读 TinySnippet轻UI组件开发系列教程–01–DataGrid选择事件

架构

Studio Pro配置

开发时效果图

示例

• Vue
• 百分比录入

救助

通过codepen 模板还原问题，在本论坛提问。

相关脚本

Monaco editor

// 数据绑定，根据情况自行修改

let 
  widget = this,savedCode =localStorage.getItem(widget.mxid + "-monaco") ||
    "//clean code\r\nconst realWidget = this.getParent().getParent().getParent();\r\nconst preWidgets = mxui.widget.getDescendantWidgets(this.domNode);\r\npreWidgets.forEach(w => w.destroy());\r\nthis._index = this._index || 1;\r\n\r\n//main logic\r\nconst clickBtn = mxui.widget.Button({ caption: ` ClickMe(${this._index++})` });\r\nclickBtn.on('click', () => {\r\n    realWidget.contextObj.set('Name', 'you clicked me! ' + this._index++);\r\n});\r\n\r\nclickBtn.placeAt(this);",
  contextObj = this.contextObj,
  editor;
document.body.classList.add("claro");

(function configMonaco() {
  mxui.dom.addCss(
    "https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs/editor/editor.main.css"
  );

  // 检查是否存在 'packages' 数组，如果不存在则创建
  if (!dojoConfig.packages) {
    dojoConfig.packages = [];
  }

  // 检查是否存在 'vs' 包
  var vsPackage = dojoConfig.packages.find(function (pkg) {
    return pkg.name === "vs";
  });

  // 如果 'vs' 包不存在，则添加配置
  if (!vsPackage) {
    dojoConfig.packages.push({
      name: "vs",
      location:
        "https://cdn.jsdelivr.net/gh/engalar/MendixTheme@c1317bb825ba5839b1df1ffe5898228c63e393f0/vs",
    });
  }
})();

// 因为monaco内有<div widgetid="xxx"></div>，让dijit误以为是widget
function overrideGetDescendantWidgets() {
  // 检查是否已经覆写过
  if (!mxui.widget.getDescendantWidgets.isOverridden) {
    const originalGetDescendantWidgets = mxui.widget.getDescendantWidgets;

    mxui.widget.getDescendantWidgets = function (node) {
      // 调用原始函数
      const widgets = originalGetDescendantWidgets.call(null, node);

      // 过滤空数据
      const filteredWidgets = widgets.filter(
        (widget) => widget !== null && widget !== undefined
      );

      // 设置 isOverridden 为 true
      mxui.widget.getDescendantWidgets.isOverridden = true;

      return filteredWidgets;
    };
  }
}

// 调用覆写函数
overrideGetDescendantWidgets();

require([
  "dojo/_base/lang",
  "dojo/throttle",
  "dijit/popup",
  "dojo/dom",
  "dojo/aspect",
  "dijit/registry",
  "dojo/dom-construct",
  "dijit/Dialog",
  "dojo/on",
  "dijit/layout/BorderContainer",
  "dijit/layout/ContentPane",
  "dijit/form/Button",
  "https://cdn.jsdelivr.net/gh/engalar/MendixTheme@c1317bb825ba5839b1df1ffe5898228c63e393f0/vs/monaco.js",
], function (
  lang,
  throttle,
  popup,
  dom,
  aspect,
  registry,
  domConstruct,
  Dialog,
  on,
  BorderContainer,
  ContentPane,
  Button,
  monaco
) {
  aspect.after(widget, "update", function () {
    contextObj = widget.contextObj;
  });
  widget.addOnDestroy(function onDestroy() {
    editor?.dispose();
  });

  widget.addOnLoad(async function () {});

  // 创建 BorderContainer 作为主容器
  var mainContainer = new BorderContainer({
    style: "height: 100%;  border: 1px solid #ccc;",
  });

  // 创建上面的 ContentPane，并在其中放置一个按钮
  var topContentPane = new ContentPane({
    region: "top",
  });
  const editBtn = new mxui.widget.Button({
    caption: "代码编辑",
  });
  topContentPane.addChild(editBtn);
  editBtn.on("click", function () {
    //new mxui.widget._WidgetBase().placeAt(document.body)
    var dialog = new mxui.widget.Dialog({
      caption: "代码编辑",
      style: "width: 100%; height: 100%;",
    });

    const editor = (window.editor = monaco.editor.create(dialog._bodyNode, {
      value: localStorage.getItem(widget.mxid + "-monaco") || savedCode,
      language: "javascript",
      automaticLayout: true,
    }));

    // 显示对话框
    dialog.show();

    dialog.on("close", function () {
      savedCode = editor.getValue();
      localStorage.setItem(widget.mxid + "-monaco", savedCode);
      editor.dispose();
      redraw();
    });
  });
  const redrawBtn = new mxui.widget.Button({ caption: "重新渲染" });
  redrawBtn.on("click", redraw);
  topContentPane.addChild(redrawBtn);

  // 创建下面的 ContentPane，并在其中放置一个按钮
  let placeHolder = new mxui.widget._WidgetBase();

  var bottomContentPane = new ContentPane({
    region: "center", // 使用 center 区域让它占据余下的高度
    content: placeHolder,
  });

  function redraw() {
    try {
      placeHolder.destroy();
      placeHolder = new mxui.widget._WidgetBase();
      bottomContentPane.set("content", placeHolder.domNode);

      const evalFunction = new Function(savedCode).bind(placeHolder);

      // 执行代码
      evalFunction();
    } catch (e) {
      console.error(e);
    }
  }

  // 将上下的 ContentPane 添加到主容器中
  mainContainer.addChild(topContentPane);
  mainContainer.addChild(bottomContentPane);

  // 将主容器添加到 document.body 中
  mainContainer.placeAt(widget.id);

  // 启动 BorderContainer
  mainContainer.startup();

redraw();
});

你的代码模板

//clean code 仅开发阶段需要，生产阶段请删除这段代码
const realWidget = this.getParent().getParent().getParent();
const preWidgets = mxui.widget.getDescendantWidgets(this.domNode);
preWidgets.forEach(w => w.destroy());


//tiny snippet app
(function () {
    //main logic
		let count = 1;
    const widget = this.mxid ? this : this.getParent().getParent().getParent(),
        that = this,
        attr = widget.configs[0].attribute01//widget api;

    require([
        "dijit/_CssStateMixin",
        "dijit/_FocusMixin",
        "dojo/keys",
        "dojo/_base/lang",
        "big.js",
        "dojo/_base/declare",
        "dijit/_TemplatedMixin",
        "dojo/on",
        "dojo/dom-class",
        "dojo/dom-construct",
        "dijit/form/NumberTextBox"
    ], function (
        CssStateMixin,
        _FocusMixin,
        keys,
        lang,
        { Big },
        declare,
        _TemplatedMixin,
        on,
        domClass,
        domConstruct
    ) {
        //start main
        const clickBtn = mxui.widget.Button({ caption: ` ClickMe(${count++})` });
        clickBtn.on('click', () => {
            widget.contextObj.set(attr, 'you clicked me! ' + count++);
        });
        clickBtn.placeAt(that);
        //end main
    });
}.bind(this)());