页面弹窗适配问题

啊～哈2025-06-15 14:01

如果你正在边刷手机边蹲马桶，恭喜！这篇博客就是为你量身定制的。现在请擦擦手（真的，擦擦吧），我们要开始了。

故事的开始是因为昨天接到个新需求需要给页面加个弹窗，用elementPlus组件，弹窗是加上了，但是因为页面之前的适配方案导致弹窗在页面的最中间，而且缩放有问题，怎么办呢？上网找了找给弹窗加了个append-to-body属性，但是适配依旧有问题，接下来上代码

一、页面弹窗

注意：ref必须要加方便找到节点，align-center弹窗居中显示， transform控制弹窗缩放

复制代码

<el-dialog
      ref="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;
}