Vue中ElementUI结合transform使用时,修复el-select弹框定位不准确问题

        在大屏开发中,比如将1920*1080放到更大像素(3500*2400)大屏上演示,此时需要使用到transform来对页面进行缩放,但是此时发现弹框定位出错问题,无法准备定位到实际位置。之前写过一篇讲解的是ElementUI中的<el-date-picker />组件修复定位问题,经过网友不断发现和提问,原来不同组件解决方案是不同的,这讲解下 <el-select />组件如何修复。

        <el-date-picker />组件地址:https://blog.csdn.net/jiciqiang/article/details/132456103#comments_30896747

        接下来我们讲下select组件的popper弹框错位问题。

一、html代码

        这里还是使用@focus事件也触发修复定位功能。

<el-selectref="elSelect"placeholder="商机状态"size="small"v-model="proStage":popper-append-to-body="false"@focus="focusFixDateSelectPosition"><el-optionv-for="item in stageList"key="item.FieldValue"label="item.FieldLabel"value="item.FieldValue"></el-option>
</el-select>

二、focus事件

        因为select组件的focus事件返回的参数为 FocusEvent ,则内部数据无法满足popper弹框的调整,如下图:

        要获取和picker一样的数据,得使用$refs获取,代码如下:

/**
* 解决Select定位问题
*/
focusFixDateSelectPosition(){let e = this.$refs['elSelect'].$refs['popper'];console.log('e', e);
}

如下图,此时已拿到和picker一样的数据结果,可以通过popperJS和$el进行修复定准了:

三、回调函数

        这里直接调用e.popperJS会出现undefined或null结果,所以添加定时器判断如果未获取对object对象,则回调函数直到获取e.popperJS对象为止,代码如下:

/*** 回调函数*/
const selectCallback = e => {setTimeout(() => {if('undefined'===typeof e['popperJS'] || null == e['popperJS']){selectCallback(e);}else{e.popperJS.state.position = 'absolute';e.popperJS.update();setTimeout(() => {e.$el.style.top = 'inherit';e.$el.style.left = '0';}, 20);}}, 20);
}

        然后将selectCallback回调函数添加到focusFixDateSelectPosition中,代码如下:

focusFixDateSelectPosition(eve){let e = this.$refs['elSelect'].$refs['popper'];selectCallback(e);
}

        此时,下拉框错位问题则解决了,如下图:

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

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

相关文章

【Android】自定义View onDraw()方法会调用两次

问题 自定义了View后&#xff0c;在构造函数中设置画笔颜色&#xff0c;发现它没起效&#xff0c;但是在onDraw()里设置颜色就会起效&#xff0c;出问题的代码如下&#xff1a; public RoundSeekbarView(Context context, Nullable AttributeSet attrs) {super(context, attrs…

视频美颜SDK与人工智能的结合:技术突破与挑战

本篇文章&#xff0c;小编将与大家共同探讨美颜SDK与人工智能结合背后的技术原理、创新应用以及面临的挑战。 一、技术原理&#xff1a;人工智能在美颜中的应用 视频美颜SDK通过整合深度学习和计算机视觉技术&#xff0c;能够更准确地识别人脸特征、肤色、表情等信息&#xff…

深入理解傅里叶变换

目录 1. 什么是傅里叶变换 2. 为什么要分解为正弦波的叠加参考资料 1. 什么是傅里叶变换 高等数学中一般是从周期函数的傅里叶级数开始介绍的&#xff0c;这里也不例外。 简单的说&#xff0c;从高中我们就学过一个理想的波可以用三角函数来描述&#xff0c;但是实际上的波可…

MAC iterm 显示git分支名

要在Mac上的iTerm中显示Git分支名&#xff0c;您需要使用一个名为“Oh My Zsh”的插件。Oh My Zsh是一个流行的Zsh框架&#xff0c;它提供了许多有用的功能和插件&#xff0c;包括在终端中显示Git分支名。 以下是在iTerm中显示Git分支名的步骤&#xff1a; 1、安装Oh My Zsh&…

Git入门详细教程

一、Git概述&#x1f387; Git官网 Git是一个开源的分布式版本控制系统&#xff0c;用于跟踪文件的变化和协作开发。它允许多个开发者在同一项目中共同工作&#xff0c;并能够有效地管理代码的版本和历史记录。Git可以帮助开发团队更好地协作&#xff0c;追踪代码变更&#xf…

什么是比特币?

比特币 比特币 &#xff08;英语&#xff1a;Bitcoin&#xff0c;缩写&#xff1a;BTC &#xff09;是一种基于 去中心化&#xff0c;采用 点对点网络&#xff0c;开放源代码&#xff0c;以 区块链 作为底层技术的 加密货币。比特币由 中本聪&#xff08;Satoshi Nakamoto&…

Nginx前后端分离部署springboot和vue项目

Nginx前后端分离部署springboot和vue项目&#xff0c;其实用的比较多&#xff0c;有的小伙伴对其原理和配置还一知半解&#xff0c;现在就科普一下&#xff1a; 1、准备后端项目 后端工程无论是微服务还是单体&#xff0c;一般最终都是jar启动&#xff0c;关键点就是把后端服…

go mock模拟接口的实现

简介 mock翻译过来是‘模拟’的意思&#xff0c;也就是模拟接口返回的信息&#xff0c;用已有的信息替换接口返回的信息&#xff0c;从而提供仿真环境&#xff0c;实现模拟数据下的功能测试&#xff1b; 在多人合作编码时&#xff0c;你写的一个函数func DoSth(People)用到了别…

【android】有些系统的应用唤起不了

Intent launchIntent getActivity().getPackageManager().getLaunchIntentForPackage("com.miui.screenrecorder"); if (launchIntent ! null) {// 应用存在&#xff0c;可以启动startActivity(launchIntent); } else {// 应用不存在&#xff0c;可以提示用户或者采…

主数据清洗的一般过程

在对主数据进行清洗之前&#xff0c;要先对主数据进行预处理。主数据预处理一般分为两个步骤&#xff0c; 将数据导入处理工具&#xff0c;比如数据库&#xff1b; 分析属性数据元 包括字段解释、数据来源、代码表等一切描述数据的信息&#xff0c;抽取一部分主数据作为样本数据…

【备战蓝桥杯】图论重点 敲黑板啦!

蓝桥杯备赛 | 洛谷做题打卡day11 文章目录 蓝桥杯备赛 | 洛谷做题打卡day11杂务题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 题解代码我的一些话 杂务 题目描述 John 的农场在给奶牛挤奶前有很多杂务要完成&#xff0c;每一项杂务都需要一定的时间来完成它。比如&a…

c#让三个线程按照顺序执行

现实的例子 三个线程都是while&#xff08;true&#xff09;的循环体 A线程&#xff1a;采集数据 B线程&#xff1a;画曲线 C线程&#xff1a;存数据库 AutoResetEvent类 AutoResetEvent 是一个线程同步的类&#xff0c;它提供了一种机制&#xff0c;允许一个或多个线程等待直…

Unity之四元数

欧拉角 万向节死锁 四元数是什么 Unity中四元数的初始化 四元数和欧拉角的互相转换 补充 四元数相乘代表旋转四元数

vue3中的nexttick

在 Vue 3 中&#xff0c;nextTick 是一个用于延迟执行代码的方法&#xff0c;直到下一次 DOM 更新循环结束。这个方法在 Vue 的生命周期钩子函数和其他需要等待 DOM 更新后再执行某些操作的情况下非常有用。 例如&#xff0c;如果在父子组件中&#xff0c;父组件向子组件传递参…

ABAP - 变量杂例1

** 常用的预定义数据类型 ** ** 类型缩写 类型 默认长度 最大长度 初始值 描述 ** C 字符 1 space 字符串&#xff0c;‘Program’ ** D 日期 8 8 00000000 ** F 浮…

vue3使用自定义组件内方法

重点 使用 defineExpose 来导出方法 // child <script setup> import { ref, Ref } from vueconst prop: Ref<string> ref(child)const method (val: string) > {console.log(val) }defineExpose({prop,method, }) </script>// father <template&g…

Linux Shell脚本入门

目录 介绍 编写格式与执行方式 Shell脚本文件编写规范 脚本文件后缀名规范 首行格式规范 注释格式 shell脚本HelloWord入门案例 需求 效果 实现步骤 脚本文件的常用执行三种方式 介绍 3种方式的区别 小结 多命令处理 Shell变量 环境变量 目标 Shell变量的介绍 变量类型 系统环境…

手把手带你死磕ORBSLAM3源代码(四十九) FrameDrawer.cc DrawFrame

目录 一.前言 二.代码 2.1完整代码 一.前言 这段代码的主要部分。 变量声明: 使用OpenCV库(表示为cv::)声明了多个变量,包括图像(im)、关键点(vIniKeys, vCurrentKeys等)、匹配(vMatches)、跟踪点(vTracks)等。state 表示跟踪的状态。Frame、MapPoint 可能是自…

计算机毕业设计 基于SpringBoot的红色革命文物征集管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

学习JavaEE的日子 day12 构造方法 类的制作

Day12 需求&#xff1a;创建人类的对象&#xff0c;并操作对象 分析&#xff1a; 人类 - Person 属性&#xff1a;name、sex、age 方法&#xff1a;eat、sleep 场景&#xff1a;创建多个对象&#xff0c;去操作对象 //测试类&#xff1a;该类中有main方法&#xff0c;测试我们写…