vue2+element禁止web页面被进行缩放，并修复element被zoom后部分组件错位问题-（2）

温馨提示：

1. 本篇文章讲解如何修复element被zoom后部分组件错位问题

2. 上一篇文章vue2+element禁止web页面被进行缩放，并修复element被zoom后部分组件错位问题-（1）-CSDN博客

   有任何问题欢迎指正，咱们一起讨论~

前言

查阅了大量资料，我把使用过的方法都整理到这里，有需要的自取。我用的是方法3，亲测有效。主要的核心就是zoom 这个会带来 很多焦点错位的问题，需要再反向缩放回去。

上一篇文章说过（我的项目用的是vue2+element进行实现的，中间有个需求就是禁止web页面被进行缩放，windows系统经常推荐用户使用125%、150%比例的缩放窗口。这样导致web页面被进行缩放，除此之外还有人为的按钮缩放。使用zoom后会造成element的部分组件要错位。

大概的思路就是在页面devicePixelRatio（设备像素比例）变化后，通过计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。并且禁止人为的缩放）

本篇就来实现修复element被zoom后部分组件错位问题：

方法一：

:popper-append-to-body=false

使用element自带的popper-append-to-body，可以解决单个seleted的偏移问题，我大概使用了一下，确实有效果，但是整个项目有很多下拉框、提示框、分页的哪些，乱七八糟的一抹多，总不能每个都写上:popper-append-to-body=false，这个方法就放弃了。

方法二：

vue2+ElementUI碰到zoom后部分组件错位的问题_哔哩哔哩_bilibili

这个方法就是写了一个js的补丁文件。链接放在这里了，但是我亲测无效，不知道怎么回事。看评论还有一种方法，重写 Popper.prototype._getBoundaries（具体的代码这篇文章评论区有，可以找找），但是我使用了也没效果，这个方法也放弃了

方法三

上面的方法都试了，没效果，那还是靠自己吧~ ，主要的核心就是zoom 这个会带来 很多焦点错位的问题，需要再反向缩放回去

1. 这个是上一篇的代码，里面写的有，截个图再看看，这里就是拿到这个class，循环出来，再进行反向缩放（这个可以加也可以不加，因为上一篇文章里面写过，已经禁止了人为的缩放了）

2. 然后再去app.vue中添加cs样式

.el-popper, .el-tooltip__popper{
  zoom: var(--dropdown-zoom, 1); /* 设置默认值为 1 */
  transform: scale(var(--dropdown-zoom-t, 1));
  transform-origin: 'left top',;
}
.el-select-dropdown,.el-picker-panel{
  zoom: var(--dropdown-zoom, 1); /* 设置默认值为 1 */
  // transform: scale(0.8);
  transform: scale(var(--dropdown-zoom-t, 1));
  transform-origin: 'left top',;
}

3. 再去created（）中调用new DevicePixelRatio().init()这个代码后面添加这两行

        document.documentElement.style.setProperty('--dropdown-zoom', window.devicePixelRatio)
        document.documentElement.style.setProperty('--dropdown-zoom-t', 1 / window.devicePixelRatio)

由于 CSS 不支持使用 JavaScript 变量直接设置样式，所以需要通过 JavaScript 设置该属性。这样就反向缩回去了，并且大小没有改变。

记得cs里面的不要加scoped   ！！！