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

相关推荐
栈老师不回家38 分钟前
Vue 计算属性和监听器
前端·javascript·vue.js
前端啊龙44 分钟前
用vue3封装丶高仿element-plus里面的日期联级选择器,日期选择器
前端·javascript·vue.js
一颗松鼠1 小时前
JavaScript 闭包是什么?简单到看完就理解!
开发语言·前端·javascript·ecmascript
小远yyds1 小时前
前端Web用户 token 持久化
开发语言·前端·javascript·vue.js
阿伟来咯~2 小时前
记录学习react的一些内容
javascript·学习·react.js
吕彬-前端2 小时前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱2 小时前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai2 小时前
uniapp
前端·javascript·vue.js·uni-app
也无晴也无风雨2 小时前
在JS中, 0 == [0] 吗
开发语言·javascript
帅比九日3 小时前
【HarmonyOS Next】封装一个网络请求模块
前端·harmonyos