UIKit模态框内调用Prompt出现栈溢出RangeError问题求助

问题原因 #

UIKit的模态框（包括prompt这类内置模态组件）在嵌套场景下，会触发重复的事件监听或DOM操作循环，尤其是全屏模态框的层级处理和事件冒泡逻辑，直接导致调用栈溢出，同时干扰了prompt输入框的焦点事件，造成无法输入的问题。

解决方案 #

1. 先关闭父级全屏模态框再打开prompt #

调用prompt前手动关闭当前全屏模态框，待prompt操作完成后，再根据业务需求重新打开父模态框：

// 假设父模态框的实例引用为parentModal
const parentModal = UIKit.modal('#your-fullscreen-modal');

// 关闭父模态框后打开prompt
parentModal.hide();
UIKit.modal.prompt('请输入内容', '', (result) => {
  // 处理prompt输入结果
  if (result) {
    // 可选：重新打开父模态框
    parentModal.show();
  }
});

2. 阻止触发按钮的事件冒泡 #

如果必须保持父模态框处于打开状态，可在触发prompt的按钮上阻止事件冒泡，避免UIKit的事件系统进入循环：

<!-- 在触发按钮上添加事件阻止逻辑 -->
<button (click)="openPrompt($event)">打开输入框</button>

openPrompt(event: Event) {
  event.stopPropagation(); // 阻止事件冒泡到父模态框
  UIKit.modal.prompt('请输入内容', '', (result) => {
    // 处理输入结果
  });
}

3. 自定义替代prompt组件 #

若上述方法无效，可自行实现一个简单的输入模态框，完全规避UIKit内置prompt的嵌套冲突：

<!-- 自定义输入模态框模板 -->
<div uk-modal #customPrompt="ukModal">
  <div class="uk-modal-dialog">
    <div class="uk-modal-header">
      <h2 class="uk-modal-title">请输入内容</h2>
    </div>
    <div class="uk-modal-body">
      <input type="text" class="uk-input" [(ngModel)]="inputValue">
    </div>
    <div class="uk-modal-footer">
      <button class="uk-button uk-button-default" (click)="customPrompt.hide()">取消</button>
      <button class="uk-button uk-button-primary" (click)="handleConfirm()">确认</button>
    </div>
  </div>
</div>

// 组件逻辑
inputValue = '';

openCustomPrompt() {
  this.inputValue = '';
  this.customPrompt.show();
}

handleConfirm() {
  // 处理输入值
  console.log(this.inputValue);
  this.customPrompt.hide();
}

4. 关闭父模态框的堆叠功能 #

初始化父级全屏模态框时，添加stack: false配置，关闭模态框堆叠机制，避免嵌套冲突：

// 初始化父模态框时禁用堆叠
UIKit.modal('#your-fullscreen-modal', { stack: false });

内容的提问来源于stack exchange，提问作者Rodrigo M