大连网站建设方案维护,iis 网站拒绝显示此网页,注册代理记账公司需要什么条件,展示型网站建设服务如果你正在边刷手机边蹲马桶#xff0c;恭喜#xff01;这篇博客就是为你量身定制的。现在请擦擦手#xff08;真的#xff0c;擦擦吧#xff09;#xff0c;我们要开始了。
故事的开始是因为昨天接到个新需求需要给页面加个弹窗#xff0c;用elementPlus组件#xff…如果你正在边刷手机边蹲马桶恭喜这篇博客就是为你量身定制的。现在请擦擦手真的擦擦吧我们要开始了。
故事的开始是因为昨天接到个新需求需要给页面加个弹窗用elementPlus组件弹窗是加上了但是因为页面之前的适配方案导致弹窗在页面的最中间而且缩放有问题怎么办呢上网找了找给弹窗加了个append-to-body属性但是适配依旧有问题接下来上代码
一、页面弹窗
注意ref必须要加方便找到节点align-center弹窗居中显示 transform控制弹窗缩放
el-dialogrefmyElementv-modeldialogOpen.showalign-center:titledialogOpen.namewidth900pxappend-to-body:style{transform: scale(${scaleVal}),}
div
classdialog-content
divimg src/assets/images/details_people.png alt/divdivimg :srcqrCodeImage altdiv stylefont-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;
}
