页面弹窗适配问题

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

故事的开始是因为昨天接到个新需求需要给页面加个弹窗,用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;
}
相关推荐
灵感__idea1 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴2 小时前
Mix
前端·webgl
代码续发3 小时前
前端组件梳理
前端
试图让你心动3 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_3 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码4 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记4 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏4 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数4 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante5 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端