结合中继器多行数据、行级操作、动态刷新 的特性,遮罩并非通用装饰,而是防止列表误触、锁定数据状态、区分模态操作的核心交互组件,以下是工作中最常用、最标准的 5 类应用场景:
1. 中继器单行编辑弹窗(最常用)
对应前文单行编辑功能,点击列表编辑弹出弹窗时开启遮罩。
- 作用:禁止用户点击、滚动底层中继器列表,防止同时点击多行编辑造成标记行错乱、数据覆盖;
- 场景:后台用户列表、订单列表、商品列表的单行修改。
2. 中继器新增数据弹窗
点击「新增条目」弹出表单弹窗时启用遮罩。
- 作用:新增过程属于独立操作流程,遮罩锁定原有列表,避免用户在新增中途点击列表其他行、刷新数据;
- 场景:列表顶部新增、批量添加数据弹窗。
3. 中继器删除确认弹窗
点击单行 / 批量删除,弹出二次确认弹窗时启用遮罩。
- 作用:删除属于高危操作,遮罩强制用户专注确认 / 取消,防止连续点击造成误删多行、重复删除;
- 场景:单行删除、批量勾选删除中继器数据。
4. 中继器加载 / 刷新等待状态
中继器执行筛选、排序、分页、批量更新动态数据操作时,临时全屏遮罩。
- 作用:防止数据刷新过程中用户重复点击按钮、频繁操作导致渲染卡顿、数据错乱;
- 场景:列表搜索加载、分页切换、批量状态修改。
5. 行内编辑、批量操作锁定场景
针对行内即时编辑、批量修改功能开启遮罩(轻量遮罩)。
- 作用:进入编辑态后锁定整表,避免一边编辑单行、一边点击其他行触发多个编辑状态冲突;
- 场景:表格行内编辑、批量勾选修改状态(启用 / 禁用、上架 / 下架)。