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.mfbz.cn/a/766503.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

grpc编译 helloworld

【1】打开helloworld所在目录 examples\cpp\helloworld 【2】CMAKE生成会报错 【3】问题解决&#xff1a;增加环境变量path “C:\Program Files (x86)\grpc\bin” 是上一篇grpc编译后安装的目录 【4】CMAKE后直接用“Open Project”打开项目

Java关于标准输入和标准输出的理解

java中的标准输入指的是System.in还是键盘输入&#xff1f;概念搞不太清楚&#xff0c;用Scanner类从键盘输入算是标准输入吗&#xff1f; 先理清一些概念&#xff1a;每个控制台程序都有标准输入、标准输出、标准错误输出三个管道&#xff08;句柄&#xff09;&#xff0c;这…

【FFmpeg】avcodec_open2函数

目录 1. avcodec_open21.1 编解码器的预初始化&#xff08;ff_encode_preinit & ff_decode_preinit&#xff09;1.2 编解码器的初始化&#xff08;init&#xff09;1.3 释放编解码器&#xff08;ff_codec_close&#xff09; FFmpeg相关记录&#xff1a; 示例工程&#xff…

Python数据分析-房价预测机器学习

一、研究背景 房地产市场作为经济活动的关键领域之一&#xff0c;对于经济的发展和社会的稳定起着至关重要的作用。在当今全球化和信息化的背景下&#xff0c;房地产市场的波动和房价的变化不仅受到国内因素的影响&#xff0c;还受到全球经济环境和国际政治形势等外部因素的影…

深入理解ThreadLocal原理

以下内容首发于我的个人网站&#xff0c;来这里看更舒适&#xff1a;https://riun.xyz/work/9898775 ThreadLocal是一种用于实现线程局部变量的机制&#xff0c;它允许每个线程有自己独立的变量&#xff0c;从而达到了线程数据隔离的目的。 基于JDK8 使用 通常在项目中是这样…

JS爬虫实战之Fastmoss

Fastmoss参数逆向 逆向前准备思路1- 确认接口2- 参数确认3- 重试校验参数逻辑4- 寻找逆向入口1- 方式一&#xff08;search搜索&#xff09;&#xff1a;2- 方式二&#xff08;堆栈搜索&#xff09;&#xff1a; 5- 获取加密算法1- fm-sign字段是有zn来的&#xff0c;我们查看z…

机器学习 C++ 的opencv实现SVM图像二分类的训练 (二)【附源码】

本节讲机器学习 C 的opencv实现SVM图像二分类的训练&#xff0c;下节讲测试&#xff1a; 数据集合data内容如下&#xff1a; 下载地址为&#xff1a;https://download.csdn.net/download/hgaohr1021/89506900 #include <stdio.h> #include <time.h> #include…

C语言课程回顾:六、C语言循环控制

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 C语言循环控制 6 循环控制6.1 概述6.2 goto语句以及用goto语句构成循环6.3 while语句6.4 do-while语句6.5 for语句6.6 循环的嵌套6.7 几种循环的比较6.8 break和continue语句…

Windows系统安装NVM,实现Node.js多版本管理

目录 一、前言 二、NVM简介 三、准备工作 1、卸载Node 2、创建文件夹 四、下载NVM 五、安装NVM 六、使用NVM 1、NVM常用操作命令 2、查看NVM版本信息 3、查看Node.js版本列表&#xff1b; 4、下载指定版本Node.js 5、使用指定版本Node.js 6、查看已安装Node.js列…

Java知识点整理 18 — Lambda表达式

一. 简介 Lambda 表达式是函数式编程思想的体现&#xff0c;强调做什么&#xff0c;而不是以什么方式去做。 面向对象编程思想强调的是对象&#xff0c;必须通过对象的形式来做一些事情。比如多线程执行任务&#xff0c;需要创建对象&#xff0c;对象需要实现指定接口&#x…

Rust监控可观测性

可观测性 在监控章节的引言中&#xff0c;我们提到了老板、前端、后端眼中的监控是各不相同的&#xff0c;那么有没有办法将监控模型进行抽象、统一呢&#xff1f; 来简单分析一下&#xff1a; 业务指标实时展示&#xff0c;这是一个指标型的数据( metric )手机 APP 上传的数…

若依 ruoyi vue上传控件 el-upload上传文件 判断是否有文件 判断文件大小

console.info(this.$refs.upload.uploadFiles.length)//this.$refs.upload.uploadFiles.length 获取当前上传控件中已选择的文件大小//判断是否存在已上传文件 if(this.$refs.upload.uploadFiles.length 0){this.$modal.msgWarning("请上传文件");return; }

轻松配置,无需重复操作:PyCharm新建项目后,如何让当前新建项目使用既有虚拟环境

1、点击右上角的设置按钮 2、点击Settings 3、点击profect 4、点击python Interprter&#xff0c;这个是python解释器 5、点击 add interpreter&#xff0c;这个是增加python解释器 6、再点击add Local interpreter 7、选择第一个Virtualenv Environment,然后选择Existin…

交叉编译tslib库和上机测试

目录 一、tslib 介绍 二、tslib 框架分析 三、交叉编译、测试 tslib 1.安装工具链 tslib &#xff08;1&#xff09;设置交叉编译工具链 &#xff08;2&#xff09;进入tslib目录 &#xff08;3&#xff09;安装工具链 &#xff08;4&#xff09;确定工具链中头文件、库…

Linux源码阅读笔记09-进程NICE案例分析1

task_nice task_nice函数功能&#xff1a;获取某个进程的nice值&#xff0c;其中nice值为进程的优先级&#xff0c;与静态优先级有关&#xff08;nicestatic_prio-120&#xff09;。 nice的取值范围&#xff1a;-20 ~ 19 内核源码 根据内核的注释可以知道&#xff1a;task_n…

13-Django项目--文件上传

目录 前端展示 路由: 数据库字段: 函数视图: 前端展示 {% extends "index/index.html" %}{% block content %}<div class"container"><input type"button" id"btnAdd" value"上传荣耀" class"btn btn-succ…

鼠标点击器免费版?详细介绍鼠标连点器的如何使用

随着科技的发展&#xff0c;鼠标连点器逐渐成为了我们生活和工作中不可或缺的工具。它不仅能够帮助我们完成频繁且重复的点击任务&#xff0c;还能在很大程度上减少我们的手部疲劳&#xff0c;提高工作效率。本文将详细介绍鼠标连点器的使用方法&#xff0c;并推荐三款好用的免…

to_json 出现乱码的解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

来咯,他来咯 看GitHub Codespaces 如何帮助缩短开发设置时间

在快节奏的软件开发世界中&#xff0c;效率和速度起着重要作用。对于开发人员来说&#xff0c;设置开发环境可能是一项耗时的任务。GitHub Codespaces 是一个基于云的环境&#xff0c;旨在通过提供对配置设置的访问来应对这一挑战。 本指南将帮助你开始使用 GitHub Codespaces …

Spring boot 更改启动LOGO

在resources目录下创建banner.txt文件&#xff0c;然后编辑对应的图案即可 注释工具 Spring Boot Version: ${spring-boot.version},-.___,---.__ /|\ __,---,___,- \ -.____,- | -.____,- // -., | ~\ /~ | …