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

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

ElementPlus选择器下拉偏移

<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等偏移问题（通用方法）

<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;即可，这样就等于变回了缩放前的样子，亲测可用，还有什么疑问评论区来咨询。