微前端下element-ui彈框偏移問題解決

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

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

安裝依賴

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

如果報錯，請更新你的nvm或者使用16.19.0版本的node

啟動官網(wǎng)例子

npm run start，正確啟動的話可以看到一下頁面：

點擊進(jìn)入vue2的dialog頁面

我們打開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));

如圖：

打開examples\vue2\src\views\Dialog.vue，寫入代碼：

<template>
<a-button @click="fullDialogVisible = true" style="margin-left: 20px">點擊打開全屏彈窗</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>

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

全文重點

打開examples\main-vue\src\views\Vue2-sub.vue此文件，寫入：

<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)計算偏左側(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>

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