页面弹窗适配问题

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

故事的开始是因为昨天接到个新需求需要给页面加个弹窗,用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;
}
相关推荐
Java水解几秒前
前端常用单位em/px/rem/vh/vm到底有什么区别?
前端
CAD老兵3 分钟前
Vite 如何借助 esbuild 实现极速 Dev Server 体验,并支持无 source map 的源码调试
前端
南屿im4 分钟前
JavaScript 手写实现防抖与节流:优化高频事件处理的利器
前端·javascript
Spider_Man4 分钟前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
浩浩测试一下20 分钟前
渗透信息收集- Web应用漏洞与指纹信息收集以及情报收集
android·前端·安全·web安全·网络安全·安全架构
西陵1 小时前
Nx带来极致的前端开发体验——借助CDD&TDD开发提效
前端·javascript·架构
叹一曲当时只道是寻常1 小时前
vue中添加原生右键菜单
javascript·vue.js
小磊哥er1 小时前
【前端工程化】前端工作中的业务规范有哪些
前端
旷世奇才李先生1 小时前
Next.js 安装使用教程
开发语言·javascript·ecmascript
ᥬ 小月亮1 小时前
webpack基础
前端·webpack