欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2023年08月29日 08:34:25   作者:segmentfault  
本章主要是解決無界微前端環(huán)境下element-ui彈框偏移問題,如果你用的是其他微前端框架,且提供了jsloader這種預(yù)處理器,則可以舉一反三解決同樣的問題

安裝依賴

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

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

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

npm run start,正確啟動(dòng)的話可以看到一下頁面:

點(diǎn)擊進(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">點(diǎn)擊打開全屏彈窗</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>

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

全文重點(diǎn)

打開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)計(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ù)彈框偏移問題;按照5所述,修改即可。(費(fèi)了大量的時(shí)間和精力,一直在尋找一個(gè)完美且傻瓜式的解決辦法,最終還是調(diào)試源碼,找到此辦法。github上解決此問題的人都是各種技巧,但我們只需要最樸素且簡單見效的辦法。)

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

(弱弱的問一句):如果解決了你的問題,可否到(小程序/app)拼夕夕上搜 店鋪 “瓊肴食貨”, 進(jìn)店來一單。。。

以上就是 微前端下element-ui彈框偏移問題解決的詳細(xì)內(nèi)容,更多關(guān)于 微前端下element-ui彈框偏移問題解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

最新評(píng)論