乐趣区

关于微前端:微前端下elementui弹框偏移问题解决

本章次要是解决无界微前端环境下 element-ui 弹框偏移问题,如果你用的是其余微前端框架,且提供了 jsloader 这种预处理器,则能够触类旁通解决同样的问题。

  1. 首先,我应用的是无界官网源码,下载地址:无界微前端源码
    如图曾经下载到本地了:应用 pnpm i 装置一下依赖

    如果报错,请 更新你的 nvm或者应用16.19.0 版本的 node

  2. 启动官网例子:npm run start,正确启动的话能够看到一下页面:

    点击进入 vue2 的 dialog 页面。

  3. 咱们关上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));

    如图:

  4. 关上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>
    

    以上代码就是为了写一个弹框,且弹框内有左中右三个下拉框,来显示下拉框是否地位失常。
    5. 【全文重点】 关上 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: [
         {
           // 在子利用所有的 css 之前
           cssBeforeLoaders: [
             // 强制使子利用 body 定位是 relative
             {content: "body{position: relative !important}" },
           ],
         },
         {jsLoader: (code) => {
             // 替换 popper.js 内计算偏左侧偏移量
             var codes = code.replace(
               "left: elementRect.left - parentRect.left",
               "left: fixed ? elementRect.left : elementRect.left - parentRect.left"
             );
             // 替换 popper.js 内右侧偏移量
             return codes.replace("popper.right > data.boundaries.right", "false");
           },
         },
       ],
     }
    }
    ...
    </script>

    按以上操作则能够实现官网例子内的弹框不在偏移。且不论下拉框是何种定位都能实现完满地位。

    综上所述:

    你只需更改主利用的 plugins 即可修复弹框偏移问题;依照 5 所述,批改即可。

最终实现成果展现:

题外话:如果解决了你的问题,可否到拼夕夕上搜店铺“琼肴食货”, 进店来下一单。。。

小贵,好吃!同学们一起加油!

退出移动版