《ElementPlus 与 ElementUI 差异集合》el-select 显示下拉列表在 Cesium 场景中无法监听关闭

前言

仅在 Element UI 时有此问题,Element Plus 由于内部结构差异较大,不存在此问题。详见《el-select 差异点,如:高、宽、body插入等》;

问题

  • 点击空白处,下拉列表可监听并关闭;
  • 但在 Cesium 中无法监听和关闭;
    在这里插入图片描述

解决方案

  • 代码 2 行,初始化时监听 body 单击事件;
  • 代码 7 行,获取全局下拉列表;
  • 代码 11 - 14 行,仅当列表显示时,触发 click 事件;
// 初始化时监听 body 单击事件
document.getElementsByTagName('body')[0].onclick = () => {// 获取 el-selectconst els = document.querySelectorAll('.el-select');els.forEach(el => {// 获取全局下拉列表const dropdownEls = el.querySelectorAll('.el-select-dropdown');for (let i = 0; i < dropdownEls.length; i++) {const dEl = dropdownEls[i];// 仅对打开的起作用if (dEl.style.display !== 'none') {el.click();break;}}})
};

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

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

相关文章

【js】解决自动生成颜色时相邻颜色视觉相似问题的技术方案

解决自动生成颜色时相邻颜色视觉相似问题的技术方案 在进行大规模颜色生成时&#xff0c;特别是在数据可视化、用户界面设计等应用领域&#xff0c;一个常见的挑战是确保相邻颜色在视觉上具有足够的区分度。本文介绍的方法通过结合黄金分割比与饱和度、亮度的周期性变化&#…

数据分析_时间维度对比及变化可视化分析(Pandas和Matplotlib)

数据分析_时间维度对比及变化可视化分析(Pandas和Matplotlib) 分析维度包括: 各年度合计销量 各年度合计销售额 各年度平均每公斤销售额 各月度销量对比 各月度销售额变化 构建测试数据 这里你可以了解到: 如何生成时间相关的数据。 如何从列表&#xff08;可迭代对象…

Linux多进程(二)进程通信方式一 管道

管道的是进程间通信&#xff08;IPC - InterProcess Communication&#xff09;的一种方式&#xff0c;管道的本质其实就是内核中的一块内存(或者叫内核缓冲区)&#xff0c;这块缓冲区中的数据存储在一个环形队列中&#xff0c;因为管道在内核里边&#xff0c;因此我们不能直接…

Vue 双向绑定、diff和nextTick原理

前言 什么是虚拟dom virtual DOM 虚拟DOM&#xff0c;用普通js对象来描述DOM结构&#xff0c;因为不是真实DOM&#xff0c;所以称之为虚拟DOM。 虚拟 dom 是相对于浏览器所渲染出来的真实 dom而言的&#xff0c;在react&#xff0c;vue等技术出现之前&#xff0c;我们要改变页面…

LabVIEW专栏八、类

该章目的是可以开发仪器类。 一、类的概述 一般来说类有三大特性&#xff0c;封装&#xff0c;继承和多态。 在实际项目中&#xff0c;最主要是继承和多态&#xff0c;要搞清楚这两者的概念和在LabVIEW中是怎样应用的。在LabVIEW中&#xff0c;面向对象编程用到的就是LabVIE…

Mac 上可以使用 ping 端口

在 Mac 上可以使用 ping 命令来检查与另一台计算机或网络设备的连通性。要 ping 一个端口&#xff0c;你需要使用另一个命令 nc&#xff08;也称为 netcat&#xff09;。 例如&#xff0c;假设你想要 ping 端口 8080&#xff08;通常用于 HTTP 代理服务器&#xff09;&#xf…

SAM在低阶自适应航空土地覆盖分类中的应用2024.01

GEOSCIENCE AND REMOTE SENSING LETTERS 2024.01 提出了一种新的语义分割模型&#xff0c;该模型结合了SAM的图像编码器和低秩自适应方法(LoRA)&#xff0c;用于航空图像的特征提取和微调。我们还使用了一个辅助CNN编码器来促进下游适应&#xff0c;并补充ViT编码器在密集视觉…

机器学习模型效果不好及其解决办法

当训练出来的机器学习模型效果不佳时&#xff0c;可能涉及多个方面的原因。为了改善模型的效果&#xff0c;需要系统地检查和分析问题的根源&#xff0c;并采取相应的措施进行优化。 一、数据问题 数据质量 检查数据是否干净、完整&#xff0c;是否存在噪声、异常值或缺失值。…

【MySQL】A01、性能优化-语句分析

1、数据库优化方向 A、SQL及索引优化 根据需求写出良好的SQL&#xff0c;并创建有效的索引&#xff0c;实现某一种需求可以多种写法&#xff0c;这时候我们就要选择一种效率最高的写法。这个时候就要了解sql优化 B、数据库表结构优化 根据数据库的范式&#xff0c;设计表结构&…

MAC 安装miniconda

Conda Conda是一个开源跨平台语言无关的包管理与环境管理系统。由“连续统分析”基于BSD许可证发布。 Conda允许用户方便地安装不同版本的二进制软件包与该计算平台需要的所有库。还允许用户在不同版本的包之间切换、从一个软件仓库下载包并安装。 Conda是用Python语言开发&am…

从C向C++14——STL初识及函数对象

一.STL初识 1.STL的诞生 长久以来&#xff0c;软件界一直希望建立一种可重复利用的东西C的面向对象和泛型编程思想&#xff0c;目的就是复用性的提升多情况下&#xff0c;数据结构和算法都未能有一套标准,导致被迫从事大量重复工作为了建立数据结构和算法的一套标准,诞生了ST…

详解汽车充电桩主板的硬件设计与软件系统

随着电动汽车时代的到来&#xff0c;充电桩逐渐成为城市新地标。而在每一个充电桩的核心&#xff0c;隐藏着一颗强大的“心脏”——充电桩主板。 充电桩主板是充电桩的核心部件&#xff0c;决定着充电桩的充电效率、安全和用户体验。今天&#xff0c;我们将深入探索汽车充电桩主…

数学分析复习:三角函数的周期性

文章目录 三角函数的周期性 本篇文章适合个人复习翻阅&#xff0c;不建议新手入门使用 三角函数的周期性 本节的主题是研究三角函数的周期性&#xff0c;我们之前已经解析地定义三角函数为 cos ⁡ x ∑ k 0 ∞ ( − 1 ) k x 2 k ( 2 k ) ! , sin ⁡ x ∑ k 0 ∞ ( − 1 )…

Java并发编程之锁的艺术:面试与实战指南(二)

1. Java中线程和进程的区别是什么&#xff1f; 进程是系统分配资源的基本单位&#xff0c;它包含了一个或多个线程以及相关的系统资源&#xff08;如内存、文件句柄等&#xff09;。进程间相互独立&#xff0c;通过进程间通信&#xff08;IPC&#xff09;进行信息交换。线程是…

分布式版本控制工具 Git 的使用方式

文章目录 Git简介下载安装基本使用起始配置Git 的三个区域基本操作流程查看仓库状态删除&#xff08;撤销暂存区&#xff09;差异对比查看版本日志版本回退修改提交日志分支概念&#xff1a;创建分支与切换分支合并分支&#xff08;快速合并&#xff09;合并分支&#xff08;提…

jQuery中的api操作

1、认识jQuery jQuery函数 , jQuery的别 "$" , $也是一个函数. // $(function(){})// $ 是什么? $ 是一个函数// console.log(typeof $);// function// $ 是jQuery的别名?// window.jQuery window.$ jQuery;// console.log(jQuery $);// true 2、文档遍历和操…

北京筑龙当选中招协第二届招标采购数字化专业委员会执行主任单位

4月18-19日&#xff0c;中国招标投标协会&#xff08;以下简称中招协&#xff09;2024年年会在宁波召开&#xff0c;北京筑龙作为中招协理事会员单位受邀出席会议。会议期间举行了“电子招标采购专业委员会换届会议暨第二届第一次工作会议”&#xff0c;北京筑龙当选第二届招标…

用代码给孩子造“钱”

起因 作为家里有两个娃的奶爸&#xff0c;时长为了孩子乱花钱而焦虑不已。然后最近看到一段短视频说了这么段话。 父母不要被动给孩子买东西&#xff0c;而是定期给孩子钱。让孩子自己管钱培养她对于钱的认知和理财的观念。 突然感觉大师我悟了。感觉值得一试。于是就打算给他…

如何在官网查看Qt5的所有模块?

2024年4月23日&#xff0c;周二上午 如果你不想一步步来的话&#xff0c;可以直接去这个Qt官方链接 https://doc.qt.io/qt-5/qtmodules.html 第一步&#xff1a;去到Qt官网 https://www.qt.io/ 第二步&#xff1a;点击文档链接 第三步&#xff1a;选择文档中的“Qt5” 第四步…

Python项目开发实战:如何自动化读取Excel数据文件并用可视化分析

注意:本文的下载教程,与以下文章的思路有相同点,也有不同点,最终目标只是让读者从多维度去熟练掌握本知识点。 下载教程:Python项目开发实战_自动化读取Excel数据文件并用可视化分析_编程案例实例课程教程.pdf 1、可视化分析的特点 在Python项目开发实战中,可视化分析扮…