。

现在请擦擦手#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}),}

src/assets/images/details_people.png

alt/divdivimg

1rem;请前往小程序使用该服务/div/div/div/el-dialog

二、js代码控制缩放

刚开始用的window.onresize监听缩放后面发现会影响之前的页面缩放页面用的就是这个缩放方案改进了一版用addEventListener去监听效果差不多。

const

{window.addEventListener(resize,

{scaleValSet()})

document.getElementById(app-box);if

(mainContent)

scale(${scale});mainContent.style.width

baseWidth