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