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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/41768.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

7.6第三天作业

一、在数据库中创建一个表student&#xff0c;用于存储学生信息 CREATE TABLE student( id INT PRIMARY KEY, name VARCHAR(20) NOT NULL, grade FLOAT ); &#xff08;1.&#xff09;先创建一个数据库 &#xff08;2.&#xff09;创建student表 查看是否创建成功 1、向studen…

http读书笔记

持久化 HTTP/1.1 和一部分的 HTTP/1.0 想出了 持久连接&#xff08;HTTP Persistent Connections&#xff0c; 也称为 HTTP keep-alive 或 HTTP connection reuse&#xff09; 的方法。 持久连接的特点是&#xff0c; 只要任意一端 没有明确提出断开连接&#xff0c; 则保持 T…

MySQL第三天作业

一、在数据库中创建一个表student&#xff0c;用于存储学生信息 CREATE TABLE student( id INT PRIMARY KEY, name VARCHAR(20) NOT NULL, grade FLOAT ); 1、向student表中添加一条新记录 记录中id字段的值为1&#xff0c;name字段的值为"monkey"…

【Linux】查找命令——which,type,find,whereis,locate

命令与文件的查找 文件的查找可就厉害了&#xff0c;因为我们常常需要知道哪个文件放在哪里&#xff0c;才能够对该文件进行一些修改或维护等操作。 有时候某些软件配置文件的文件名是不变的&#xff0c;但是各Linux发行版放置的目录则不同。 此时就要利用一些查找命令将该配…

【linux/shell】shell中实现函数重载

在 shell 脚本中&#xff0c;函数重载&#xff08;Function Overloading&#xff09;的概念与一些编程语言&#xff08;如 Java 或 C#&#xff09;中的函数重载不同。在这些编程语言中&#xff0c;你可以定义多个同名函数&#xff0c;只要它们的参数列表不同。然而&#xff0c;…

C语言基础全解:细说每个知识点

目录 1. 进制转换方法 1.1 二进制转十进制 1.2 十进制转二进制 1.3 二进制转八进制 1.4 二进制转十六进制 1.5 八进制转二进制 1.6 十六进制转二进制 2. 进制简介 特别注意 C语言基础元素概览 1. 关键字分类 1.1 存储类型关键字 1.2 数据类型关键字 1.3 构造类型…

25.【C语言】循环结构之for 上

1.基本使用 类比while 在while循环中&#xff0c;有三个不可或缺的部分&#xff1a;初始化&#xff0c;判断部分&#xff0c;调整部分 int i 0;//初始化 while (i < 10)//判断部分 {……i;//调整部分 }三个部分太分散&#xff0c;用for循环可集为一体&#xff0c;简洁 …

使用shell脚本实现DM8开机自动启动

编写shell脚本 #!/bin/bashsu -dmdba >>EOF cd /home/dmdba/dmdbms/bin ./DmServiceDMTEST start echo "dm start ... " EOF注意&#xff1a;DmServiceDMTEST每个服务器设置的不一样&#xff0c;根据实际进行更换 授权脚本可执行权限 chmod -x /dmdata/dmse…

Kotlin中的关键字

Kotlin 中的关键字可分为几个大类&#xff1a; 声明/定义关键字&#xff1a; class&#xff1a;用于定义类interface&#xff1a;用于定义接口object&#xff1a;用于声明对象&#xff0c;Kotlin中实现单例模式的关键字fun&#xff1a;用于声明函数var&#xff1a;用于声明可变…

目标检测精度提升秘籍:算法优化策略全解析

标题&#xff1a;目标检测精度提升秘籍&#xff1a;算法优化策略全解析 目标检测是计算机视觉领域的核心技术之一&#xff0c;广泛应用于视频监控、自动驾驶、医疗成像等领域。然而&#xff0c;提升目标检测算法的准确性是一个持续的挑战。本文将深入探讨如何优化目标检测算法…

web学习笔记(七十九)

目录 1.全局共享数据的用法 2.小程序的本地持久化存储 3.小程序获取头像和用户昵称 4.如何实现进入页面就隐藏TabBar 1.全局共享数据的用法 小程序中的全局数据再app.js文件中声明&#xff0c;app本来就是小程序给我们配置的全局文件&#xff0c;因此在app.js文件中声明的…

数据结构第12节 有向图

有向图&#xff08;Directed Graph 或 Digraph&#xff09;是一种图数据结构&#xff0c;其中的边具有方向性。这意味着在一个有向图中&#xff0c;边可以被视为箭头&#xff0c;箭头从一个顶点指向另一个顶点&#xff0c;表示从起点到终点的单向关系。有向图的这种特性使得它在…

搭建互联网医院实战:从源码到在线问诊APP的全流程开发

今天&#xff0c;笔者将讲述在线问诊APP的全流程开发&#xff0c;帮助开发者理解和掌握搭建互联网医院的核心技术和步骤。 一、需求分析与设计 需求分析包括明确目标用户、功能需求、性能需求等。设计阶段则包括系统架构设计、数据库设计和前后端界面设计等。 1.目标用户&…

最小权顶点覆盖问题-优先队列分支限界法-C++

问题描述: 给定一个赋权无向图 G(V,E)&#xff0c;每个顶点 v∈V 都有一个权值 w(v)。如果 U⊆V&#xff0c;U⊆V&#xff0c;且对任意(u,v)∈E 有 u∈U 或 v∈U&#xff0c;就称 U 为图 G 的一个顶点覆盖。G 的最小权顶点覆盖是指 G 中所含顶点权之和最小的顶点覆盖。对于给定…

提取重复数据

直接上控制台代码&#xff1a; Module Module1Sub Main()Console.WriteLine("请输入数据&#xff0c;以""&#xff0c;""相隔&#xff1a;")Dim str As String Console.ReadLineDim result From x In str.Split(",")Group By x Int…

NTP协议格式解析

1. NTP时间戳格式 SNTP使用在RFC 1305 及其以前的版本所描述标准NTP时间戳的格式。与因特网标准标准一致&#xff0c; NTP 数据被指定为整数或定点小数&#xff0c;位以big-endian风格从左边0位或者高位计数。除非不这样指定&#xff0c;全部数量都将设成unsigned的类型&#…

用python做DDL的静态分析

最近在用python做DDL SQL的分析&#xff0c;用的是simple_ddl_parser1.5.1。遇到了一些问题&#xff0c;记录一下。 simple_ddl_parser能解析多种数据库的DDL语句&#xff0c;我要处理的是mysql的DDL&#xff0c;发现有些mysql的写法还是不支持&#xff1a; 在表层面不支持使用…

Android Graphics 显示系统 - 监测、计算FPS的工具及设计分析

“ 在Android图像显示相关的开发、调试、测试过程中&#xff0c;如何能有效地评估画面的流畅度及监测、计算图层渲染显示的实时FPS呢&#xff1f;本篇文章将会提供一种实用、灵巧的思路。” 01 设计初衷 面对开发测试中遇到的卡顿掉帧问题&#xff0c;如何在复现卡顿的过程中持…

大模型AIGC转行记录(一)

自从22年11月chat gpt上线以来&#xff0c;这一轮的技术浪潮便变得不可收拾。我记得那年9月份先是在技术圈内讨论&#xff0c;然后迅速地&#xff0c;全社会在讨论&#xff0c;各个科技巨头、金融机构、政府部门快速跟进。 软件开发行业过去与现状 我19年决定转码的时候&…

代码随想录算法训练营第四十五天| 300.最长递增子序列、 674. 最长连续递增序列、 718. 最长重复子数组

300.最长递增子序列 题目链接&#xff1a;300.最长递增子序列 文档讲解&#xff1a;代码随想录 状态&#xff1a;不会&#xff0c;递推状态的时候只想着如何从dp[i-1]推导dp[i]&#xff0c;没想过可能需要枚举dp[0-i] 思路&#xff1a; 找出所有比自己小的数字的dp[j],在这些dp…