页面弹窗适配问题
如果你正在边刷手机边蹲马桶，恭喜！这篇博客就是为你量身定制的。现在请擦擦手（真的，擦擦吧），我们要开始了。
故事的开始是因为昨天接到个新需求需要给页面加个弹窗，用elementPlus组件，弹窗是加上了，但是因为页面之前的适配方案导致弹窗在页面的最中间，而且缩放有问题，怎么办呢？上网找了找给弹窗加了个append-to-body属性，但是适配依旧有问题，接下来上代码
一、页面弹窗
注意：ref必须要加方便找到节点，align-center弹窗居中显示， transform控制弹窗缩放
<el-dialogref="myElement"v-model="dialogOpen.show"align-center:title="dialogOpen.name"width="900px"append-to-body:style="{transform: `scale(${scaleVal})`,}"
><div
class="dialog-content"
><div><img src="@/assets/images/details_people.png" alt=""></div><div><img :src="qrCodeImage" alt=""><div style="font-size: 1rem;">请前往小程序使用该服务</div></div></div></el-dialog>二、js代码（控制缩放）
刚开始用的window.onresize监听缩放，后面发现会影响之前的页面缩放（页面用的就是这个缩放方案），改进了一版，用addEventListener去监听，效果差不多。
const scaleVal = ref(1)
const myElement = ref(null);
const scaleValSet = () => {scaleVal.value = window.innerWidth / 1920;
};watchEffect(() => {window.addEventListener('resize', () => {scaleValSet()})
})
// window.onresize = function () {
// scaleValSet();
// };三、补充（页面缩放方案除去弹窗）
页面缩放方案是在节点 "app-box" 整体用transform去缩放
const baseWidth = 1920; //设计稿宽度%10 比如 1920// 设置rem 函数
export function setRem() {const scale = window.innerWidth / baseWidth;const mainContent = document.getElementById("app-box");if (mainContent) {mainContent.style.transform = `scale(${scale})`;mainContent.style.width = baseWidth + "px";// mainContent.style.height = window.innerHeight / scale + "px";}
}
window.onresize = function () {setRem();
};
当然需要在main.js去引入
import { setRem } from './rem.js' // rem适配setTimeout(() => {setRem();
}, 0);最后还需要在main.css加上一行代码
#app-box {transform-origin: left top;
}