微前端下element-ui彈框偏移問(wèn)題解決

更新時(shí)間：2023年08月29日 08:34:25 作者：segmentfault

本章主要是解決無(wú)界微前端環(huán)境下element-ui彈框偏移問(wèn)題，如果你用的是其他微前端框架，且提供了jsloader這種預(yù)處理器，則可以舉一反三解決同樣的問(wèn)題

安裝依賴(lài)

首先，我使用的是無(wú)界官方源碼，下載地址：無(wú)界微前端源碼如圖已經(jīng)下載到本地了：使用pnpm i安裝一下依賴(lài)

如果報(bào)錯(cuò)，請(qǐng)更新你的nvm或者使用16.19.0版本的node

啟動(dòng)官網(wǎng)例子

npm run start，正確啟動(dòng)的話(huà)可以看到一下頁(yè)面：

點(diǎn)擊進(jìn)入vue2的dialog頁(yè)面

我們打開(kāi)examples\vue2\src\main.js，在頂部任意地方加入：

import Row from "element-ui/lib/row";
import Col from "element-ui/lib/col";
import "element-ui/lib/theme-chalk/row.css";
import "element-ui/lib/theme-chalk/col.css";
[Row, Col].forEach((element) => Vue.use(element));

如圖：

打開(kāi)examples\vue2\src\views\Dialog.vue，寫(xiě)入代碼：

<template>
<a-button @click="fullDialogVisible = true" style="margin-left: 20px">點(diǎn)擊打開(kāi)全屏彈窗</a-button>
 <el-dialog title="全屏彈窗" fullscreen :visible.sync="fullDialogVisible" width="30%">
   <el-row type="flex" justify="space-between">
     <el-col :span="6"
       ><div class="grid-left">
         <el-select v-model="value" placeholder="el-select">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select></div
     ></el-col>
     <el-col :span="6"
       ><div class="grid-center">
         <el-select v-model="value" placeholder="el-select">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select></div
     ></el-col>
     <el-col :span="6"
       ><div class="grid-right">
         <el-select v-model="value" placeholder="el-select">
           <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
         </el-select></div
     ></el-col>
   </el-row>
   <span slot="footer" class="dialog-footer">
     <el-button @click="fullDialogVisible = false">取 消</el-button>
     <el-button type="primary" @click="fullDialogVisible = false">確 定</el-button>
   </span>
 </el-dialog>
</template>
<script>
...
data() {
 return {
   fullDialogVisible: false
 }
}
...
</script>

以上代碼就是為了寫(xiě)一個(gè)彈框，且彈框內(nèi)有左中右三個(gè)下拉框，來(lái)顯示下拉框是否位置正常。

全文重點(diǎn)

打開(kāi)examples\main-vue\src\views\Vue2-sub.vue此文件，寫(xiě)入：

<template>
<WujieVue width="100%" height="100%" name="vue2" :url="vue2Url" :plugins="plugins"></WujieVue>
</template>
<script>
...
data() {
    return {
      plugins: [
        {
          // 在子應(yīng)用所有的css之前
          cssBeforeLoaders: [
            // 強(qiáng)制使子應(yīng)用body定位是relative
            { content: "body{position: relative !important}" },
          ],
        },
        {
          jsLoader: (code) => {
            // 替換popper.js內(nèi)計(jì)算偏左側(cè)偏移量
            var codes = code.replace(
              "left: elementRect.left - parentRect.left",
              "left: fixed ? elementRect.left : elementRect.left - parentRect.left"
            );
            // 替換popper.js內(nèi)右側(cè)偏移量
            return codes.replace("popper.right > data.boundaries.right", "false");
          },
        },
      ],
    }
}
...
</script>

按以上操作則可以實(shí)現(xiàn)官網(wǎng)例子內(nèi)的彈框不在偏移。且不論下拉框是何種定位都能實(shí)現(xiàn)完美位置。

綜上所述

你只需更改主應(yīng)用的plugins即可修復(fù)彈框偏移問(wèn)題；按照5所述，修改即可。（費(fèi)了大量的時(shí)間和精力，一直在尋找一個(gè)完美且傻瓜式的解決辦法，最終還是調(diào)試源碼，找到此辦法。github上解決此問(wèn)題的人都是各種技巧，但我們只需要最樸素且簡(jiǎn)單見(jiàn)效的辦法。）

最終實(shí)現(xiàn)效果展示：