素材巴巴 > 程序开发 >

微前端micro-app使用产生的子项目bug(blockly-js 定位失效问题)

程序开发 2023-09-07 15:54:59

1.bug环境

angular13 框架,
blockly 谷歌积木插件,
micro-app 微前端,
NG-ZORRO组件库中的drawer组件。

2 非micro-app环境 出现的bug

单独项目中,出现blockly 组件定位失效的问题。
在这里插入图片描述

2.1 分析问题

通过点击可以感受到,项目中blockly块的定位出现问题。
所以进行正常分析,肯定块显示的上层附近定位,位置出现问题。

2.2 定位问题

通过分析得知是上层定位出现问题,打开开发者模式,通过选中分析它的上层父级,父级是html元素
因为ng-zorro 组件drawer 抽屉当打开时,会给html添加.cdk-global-scrollblock类,并进行定位赋值。

2.3 解决问题

通过定位问题,知道问题所在,所以通过js进行修改。
修改过程:
当打开drawer的时候,通过js对html进行修改,当关闭drawer的时候,对html进行数值的回退

3 micro-app 微前端环境 出现的bug

微前端项目中,出现blockly 组件定位失效的问题。
在这里插入图片描述

3.1 分析

通过点击可以感受到,项目中blockly块的定位出现问题。
所以进行正常分析,肯定块显示的上层附近定位,位置出现问题。

3.2 定位

通过分析得知是上层定位出现问题,打开开发者模式,通过选中分析它的上层父级,父级是微前端的micro-app元素
因为是微前端,所以是嵌套的方式,此时侧边栏是占有位置的。但是blockly获取的位置是获取的整个页面的位置而父亲不是html,而是micro-app,所以照成了位置显示的错误。

3.3 解决

通过定位问题,知道问题所在,所以通过js进行修改。
修改过程:
当打开drawer的时候,通过js对micro-app元素进行修改,当关闭drawer的时候,对micro-app元素进行数值的回退


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。