zoom缩放问题(关于ElementPlus、Echarts、Vue3draggable等组件偏移问题)

做了一个项目下来,由于整体界面偏大,采取了缩放90%,导致很多组件出现偏移问题,以下我会把我遇到的各种组件偏移问题依次进行描述解答:

ElementPlus选择器下拉偏移

html 复制代码
<template>
    <el-select :teleported="false" v-model="serviceId" placeholder="请选择服务器" size="large">
         <el-option label="测试" :value="1" />
    </el-select>
</template>

需要加上:teleported="false",把teleported属性改成false,意思是不将下拉列表插入至body元素,这样就不会产生偏移了。

Echarts和Vue3draggable等偏移问题(通用方法)

html 复制代码
<template>
    <div id="echarts" :style="`zoom:${zoom};transform:scale(${1/zoom});transform-origin:0 0;width: 100%;height: 100%;`"></div>
</template>

<script setup>
    import { onMounted,ref } from 'vue';
    const zoom = ref(1)
    onMounted(() => {
        zoom.value =  1/ 0.9//缩放zoom:90%的案例
        window.addEventListener('resize', () => {
            zoom.value = 1/ 0.9
        })
    })
</script>

在style里加上zoom、transform:scale()、transform-origin:0 0;即可,这样就等于变回了缩放前的样子,亲测可用,还有什么疑问评论区来咨询。

相关推荐
snows_l5 小时前
MacOS 通过Homebrew 安装nvm
前端·macos
前端开发爱好者5 小时前
下一代全栈框架:Deno + Vite 的结合体!
前端·javascript·后端
CUGGZ5 小时前
前端部署,又有新花样?
前端·javascript
Zz_waiting.5 小时前
Javaweb 14.4 Vue3 视图渲染技术
前端·javascript·vue.js
前端开发爱好者6 小时前
一键 i18n 国际化神库!适配 Vue、React!
前端·javascript·vue.js
前端开发爱好者6 小时前
Vite 移动端调试利器!开发效率飙升 300%!
前端·javascript·vue.js
BillKu6 小时前
容器元素的滚动条回到顶部
前端·javascript·vue.js
weixin_423391936 小时前
React 19 全面解析:颠覆性的新特性与实战指南
前端·javascript·react.js
weixin_423391936 小时前
React Hooks 钩子
前端·javascript·react.js
CUGGZ6 小时前
第三代 React,怎么玩?
前端·javascript·react.js