V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
coffeeBookCode
V2EX  ›  前端开发

页面里有多个遮罩时,如何处理遮罩重叠的现象?

  •  
  •   coffeeBookCode · 2020-03-16 17:57:07 +08:00 · 1182 次点击
    这是一个创建于 1719 天前的主题,其中的信息可能已经有所发展或是发生改变。

    问题现象:

    当页面里不同的组件同时加载不同的请求时,如果这些组件此时都有遮罩,那么就会出现遮罩重叠的现象,页面上有多个 loading 动画等,用户体验不太好。

    我感觉这个问题不简单,我能想到需要处理的点有:

    1. 判断遮罩是否重叠?

    2. 请求是异步的,遮罩如何还原到对应的组件?比如当页面全局和页面上某个组件同时产生遮罩,那么此时应该是只保留全局遮罩;当全局遮罩对应的请求完成时,假如局部遮罩的请求尚未完成,那么此时局部遮罩应该还原。

    我想到的方案:

    用的是 axios,所以可以在 axios 拦截器里记录下 http 请求以及对应的 DOM 层级,这里获得 DOM 层级的作用是页面上的组件关联上,以及通过层级判断遮罩是否重叠。

    讨教一下大家的好想法。

    目前尚无回复
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1131 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 23:37 · PVG 07:37 · LAX 15:37 · JFK 18:37
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.