若依框架下动态弹窗尺寸适配与父子窗体数据交互的实战解析

1. 若依框架弹窗基础操作与常见问题

在若依框架的实际开发中，弹窗操作是最常用的功能之一。比如在用户管理模块中，我们需要通过弹窗选择部门信息。官方虽然提供了基础的弹窗功能，但在实际使用时会遇到两个典型问题：

首先是弹窗尺寸控制问题。官方提供的$.modal.openOptions()方法虽然可以设置固定像素值（如width: "380"），但直接使用百分比参数（如width: "80%"）时会失效。这个问题源于框架底层将百分比值直接拼接了"px"单位，导致浏览器无法正确解析。

// 错误示例：百分比参数不生效
$.modal.openOptions({
  title: '选择部门',
  width: "80%",  // 实际渲染为"80%px"
  url: '/system/dept/tree'
});

// 正确做法：动态计算实际像素值
$.modal.openOptions({
  title: '选择部门',
  width: parent.window.innerWidth * 0.8,  // 转换为实际像素
  url: '/system/dept/tree'
});

其次是父子窗体数据交互问题。当我们需要在父窗体中获取子窗体的表单数据或表格选项时，官方提供了两种实现方式：DOM操作和函数调用。这两种方式各有适用场景，需要根据具体需求选择。

2. 动态弹窗尺寸适配方案

2.1 百分比布局失效原因分析

通过调试ry-ui.js源码可以发现，框架在处理弹窗尺寸时直接将参数值与"px"拼接：

// ry-ui.js 源码片段
layer.open({
  area: [width + 'px', height + 'px'],  // 这里会将"80%"变成"80%px"
  // 其他参数...
});

这种处理方式导致CSS无法识别带单位的百分比值。通过Chrome开发者工具调试可以看到，最终生成的样式确实存在问题。

2.2 三种解决方案对比

方案一：修改框架源码 直接修改ry-ui.js中的单位处理逻辑，但这种方式不利于后续框架升级维护，不推荐使用。

方案二：固定像素值 直接指定具体像素值，简单但缺乏灵活性：

width: "600",  // 固定宽度600px

方案三：动态计算百分比（推荐） 通过JavaScript计算实际像素值：