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

陈琦鹏2024-07-03 11:53

做了一个项目下来，由于整体界面偏大，采取了缩放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;即可，这样就等于变回了缩放前的样子，亲测可用，还有什么疑问评论区来咨询。