diff --git a/examples/sites/demos/pc/menus.js b/examples/sites/demos/pc/menus.js index 78c05724b..5487c02e4 100644 --- a/examples/sites/demos/pc/menus.js +++ b/examples/sites/demos/pc/menus.js @@ -19,7 +19,8 @@ export const docMenus = [ { 'title': '开发示例', 'titleEn': 'developDemo', 'key': 'develop-demo' }, { 'title': '国际化', 'titleEn': 'i18n', 'key': 'i18n' }, { 'title': '主题配置', 'titleEn': 'theme', 'key': 'theme' }, - { 'title': '表单校验配置', 'titleEn': 'formValid', 'key': 'form-valid' } + { 'title': '表单校验配置', 'titleEn': 'formValid', 'key': 'form-valid' }, + { 'title': '常见问题', 'titleEn': 'faq', 'key': 'faq' } ] } ] diff --git a/examples/sites/demos/pc/webdoc/faq-en.md b/examples/sites/demos/pc/webdoc/faq-en.md new file mode 100644 index 000000000..088e25ddc --- /dev/null +++ b/examples/sites/demos/pc/webdoc/faq-en.md @@ -0,0 +1,18 @@ +## FAQ + +### 1、Popup element misaligned and flipped in wujie micro front-end + +_Reason:_ The popup element has a boundary detection logic, and in sub applications, the width and height of 'window' may be much smaller than that of the viewport, +therefore, it can misjudge boundaries, leading to issues such as flipping and misalignment. + +_Solution:_ Introducing popup global configuration, assigning the 'window' of the main application to the 'viewportWindow' of the global configuration for boundary judgment + +```js +import globalConfig from '@opentiny/vue-renderless/common/global' + +// Determine if the app run in the sub application +if (window.__POWERED_BY_WUJIE__) { + // In sub applications, the window of the main application can be obtained through window. parent + globalConfig.viewportWindow = window.parent +} +``` diff --git a/examples/sites/demos/pc/webdoc/faq.md b/examples/sites/demos/pc/webdoc/faq.md new file mode 100644 index 000000000..b1fa18cfa --- /dev/null +++ b/examples/sites/demos/pc/webdoc/faq.md @@ -0,0 +1,18 @@ +## 常见问题 + +### 1、弹出元素在无界微前端中发生错位、翻转 + +_原因:_ 弹出类的元素,存在一个边界检测逻辑,在子应用中,`window` 的宽高可能会比视口小得多, +因此会错误判断边界,导致翻转和错位等问题。 + +_解决方案:_ 引入 popup 全局配置,将主应用的 `window` 赋值给全局配置的 `viewportWindow` 用于边界判断 + +```js +import globalConfig from '@opentiny/vue-renderless/common/global' + +// 需要判断是否在子应用当中 +if (window.__POWERED_BY_WUJIE__) { + // 子应用中可以通过window.parent获取主应用的window + globalConfig.viewportWindow = window.parent +} +```