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

news2024/10/5 14:12:54

做了一个项目下来,由于整体界面偏大,采取了缩放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.coloradmin.cn/o/1901195.html

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

相关文章

单选多选提交问卷,代码示例

&#xff45;&#xff4c;&#xff45;&#xff4d;&#xff45;&#xff4e;&#xff54;中 需要对接口返回的数据进行分析。多选问题使用checkbox&#xff0c;单选题使用radio。 多选时可以绑定&#xff4d;&#xff49;&#xff4e;&#xff0f;&#xff4d;&#xff41;&am…

Transformer前置知识:Seq2Seq模型

Seq2Seq model Seq2Seq&#xff08;Sequence to Sequence&#xff09;模型是一类用于将一个序列转换为另一个序列的深度学习模型&#xff0c;广泛应用于自然语言处理&#xff08;NLP&#xff09;任务&#xff0c;如机器翻译、文本摘要、对话生成等。Seq2Seq模型由编码器&#…

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

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

统计是一门艺术(非参数假设检验)

1.定义 当总体分布未知&#xff0c;那么就需要一种与分布具体数学形式无关的统计推断方法&#xff0c;称为非参数方法 只能利用样本中的一般信息包括位置和次序关系等 稳健性强 2.符号检验 考虑问题&#xff1a; 小样本情况&#xff1a; 以概率为1/2的二项分布是对称的 两…

ASP.NET Core----基础学习01----HelloWorld---创建Blank空项目

文章目录 1. 创建新项目--方式一&#xff1a; blank2. 程序各文件介绍&#xff08;Project name &#xff1a;ASP.Net_Blank&#xff09;&#xff08;1&#xff09;launchSettings.json 启动方式的配置文件&#xff08;2&#xff09;appsettings.json 基础配置file参数的读取&a…

昇思25天学习打卡营第08天 | 模型训练

昇思25天学习打卡营第08天 | 模型训练 文章目录 昇思25天学习打卡营第08天 | 模型训练超参数损失函数优化器优化过程 训练与评估总结打卡 模型训练一般遵循四个步骤&#xff1a; 构建数据集定义神经网络模型定义超参数、损失函数和优化器输入数据集进行训练和评估 构建数据集和…

Git 运用小知识

1.Git添加未完善代码的解决方法 1.1 Git只是提交未推送 把未完善的代码提交到本地仓库 只需点击撤销提交&#xff0c;提交的未完善代码会被撤回 代码显示未提交状态 1.2 Git提交并推送 把未完善的代码提交并推送到远程仓库 点击【未完善提交并推送】的结点选择还原提交&#x…

前端面试题20(防抖函数)

在前端开发中&#xff0c;防抖&#xff08;debounce&#xff09;函数是一种常见的优化技术&#xff0c;用于控制函数的执行频率&#xff0c;避免在短时间内重复调用同一函数。这在处理如用户输入、窗口尺寸变化或鼠标移动等高频事件时特别有用&#xff0c;可以显著提升应用程序…

最小权顶点覆盖问题-优先队列分支限界法-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 中所含顶点权之和最小的顶点覆盖。对于给定…

AttackGen:一款基于LLM的网络安全事件响应测试工具

关于AttackGen AttackGen是一款功能强大的网络安全事件响应测试工具&#xff0c;该工具利用了大语言模型和MITRE ATT&CK框架的强大功能&#xff0c;并且能够根据研究人员选择的威胁行为组织以及自己组织的详细信息生成定制化的事件响应场景。 功能介绍 1、根据所选的威胁行…

springboot项目多模块工程==1搭建

1、新建父工程 采用springboot工程作为父工程搭建方便依赖选择&#xff0c;在这个基础上进行maven的pom父子模块结构调整。该工程选择mave进行依赖管理 2、springboot 版本及相关依赖选择 3、删除工程目录src,并修改pom 由于该父工程只作为依赖的统一管理&#xff0c;因此将…

Python实战训练(方程与拟合曲线)

1.方程 求e^x-派&#xff08;3.14&#xff09;的解 用二分法来求解&#xff0c;先简单算出解所在的区间&#xff0c;然后用迭代法求逼近解&#xff0c;一般不能得到精准的解&#xff0c;所以设置一个能满足自己进度的标准来判断解是否满足 这里打印出解x0是因为在递归过程中…

CentOS 7安装Elasticsearch7.7.0和Kibana

一. 准备安装包 elasticsearch和kibana&#xff1a;官网历史版本找到并下载&#xff08;https://www.elastic.co/cn/downloads/past-releases#elasticsearch&#xff09;ik分词器&#xff1a;GitHub下载&#xff08;https://github.com/infinilabs/analysis-ik/releases/tag/v…

3.js - 裁剪平面(clipIntersection:交集、并集)

看图 代码 // ts-nocheck// 引入three.js import * as THREE from three// 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls// 导入lil.gui import { GUI } from three/examples/jsm/libs/lil-gui.module.min.js// 导入tween import …

Interpretability 与 Explainability 机器学习

「AI秘籍」系列课程&#xff1a; 人工智能应用数学基础人工智能Python基础人工智能基础核心知识人工智能BI核心知识人工智能CV核心知识 Interpretability 模型和 Explainability 模型之间的区别以及为什么它可能不那么重要 当你第一次深入可解释机器学习领域时&#xff0c;你会…

WEB编程-了解Tomcat服务器

第⼀章⽹络编程 1.1 概述 计算机⽹络&#xff1a;是指将地理位置不同的具有独⽴功能的多台计算机及其外部设备&#xff0c;通过通信线路连接起来&#xff0c;在⽹络 操作系统、⽹络管理软件及⽹络通信协议的管理和协调下&#xff0c;实现资源共享和信息传递的计算机系统。 …

cs224n作业3 代码及运行结果

代码里要求用pytorch1.0.0版本&#xff0c;其实不用也可以的。 【删掉run.py里的assert(torch.version “1.0.0”)即可】 代码里面也有提示让你实现什么&#xff0c;弄懂代码什么意思基本就可以了&#xff0c;看多了感觉大框架都大差不差。多看多练慢慢来&#xff0c;加油&am…

前端位置布局汇总

1、位置&#xff1a;绝对位置和相对位置 绝对位置 style"position: absolute;left: 218px;top: 0%;" style"position: absolute;bottom:5px;right:5px ;" 相对位置 :margin外边距 padding内边距 style"border:1px solid black;width:200px;text-ali…

vue事件处理v-on或@

事件处理v-on或 我们可以使用v-on指令&#xff08;简写&#xff09;来监听DOM事件&#xff0c;并在事件触发时执行对应的Javascript。用法&#xff1a;v-on:click"methodName"或click"hander" 事件处理器的值可以是&#xff1a; 内敛事件处理器&#xff1…

Yolo v7网络实现细节(一)

Yolo v7网络实现细节 YOLO v7网络架构的整体介绍 不同GPU和对应模型&#xff1a; ​​​​​​​边缘GPU&#xff1a;YOLOv7-tiny普通GPU&#xff1a;YOLOv7​​​​​​​云GPU的基本模型&#xff1a; YOLOv7-W6 激活函数&#xff1a; YOLOv7 tiny&#xff1a; leaky ReLU其…