vue2 由于大屏设置了zoom导致el-tooltip错位问题

南桥几经秋_

于 2024-01-29 17:18:49 发布

阅读量2.3k

点赞数 9

分类专栏：大屏开发记录文章标签： vue elementui javascript

本文链接：https://blog.youkuaiyun.com/qq_41615201/article/details/135916846

版权

大屏开发记录专栏收录该内容

2 篇文章

订阅专栏

本文描述了在解决上文提到的Zoom配置后，遇到Elementel-tooltip在屏幕缩放时的错位问题，作者提供了自定义组件的代码解决方案，以适应不同屏幕大小的等比缩放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题背景：

由于上一篇文章中，我们做了zoom的配置，来处理屏幕缩放问题。最近在使用 element的el-tooltip存在错位的情况，故作此调整。

问题：

在这里插入图片描述

效果：

在这里插入图片描述

代码：

// 可以自己封装一个组件
<el-tooltip
      effect="dark"
      :content="content"
      :style="{
        zoom: bodyZoom, //取值为 document.body.style.zoom
        transform: `scale(${1 / bodyZoom})`,
        transformOrigin: 'left top',
      }"
    >
      <slot/>
</el-tooltip>