《Cesium 进阶知识点》- el-select 列表打开后,点击Cesium.Viewer场景无法自动关闭

前提
  • el-select属性 popper-append-to-body 必须false。这样初始化的列表 el-select-dropdown 才在 el-select下;
  • 目前测试,仅对 Cesium.Viewer 生成的 canvas 点击时列表无法自动关闭;
  • 使用原生 canvasecharts,点击其场景时,列表自动关闭;
解决方案
  1. 代码第 1 行,Cesium.Viewer 初始化完成后,监听 .cesium-widget 的点击事件;

    在这里插入图片描述

  2. 代码第 3 - 6 行,获取全部 el-select,循环获取每个 el-select 下的列表 el-select-dropdown

  3. 代码第 9 - 13 行,判断列表 el-select-dropdown 是否显示;

  4. 代码第 10 行,仅在打开状态下,调用 click 事件即可关闭列表;

    document.getElementsByClassName('cesium-widget')[0].onclick = () => {// //  el 起作用let els = document.querySelectorAll('.el-select');els.forEach(el => {// 仅对打开的起作用let 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/news/118939.shtml

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

相关文章

vivado简单仿真入门

打开软件 创建工程 create project ![在这里插入图片描述](https://img-blog.csdnimg.cn/892eda626d394733920854b71ca8f726.png)先next,保留工程路径&#xff0c;配置环境 配置芯片环境 本次芯片类型 xc7k325tffg900-2 创建之后完整的demo 编写仿真内容 timescale 1ns/1…

RabbitMQ 笔记

一、win10安装erlang 1.1 安装erLang语言&#xff0c;配置环境变量 erLang官网地址 1.2 配置环境变量 &#xff08;1&#xff09;添加系统变量ERLANG_HOME &#xff08;2&#xff09;path路径&#xff0c;指向bin目录 1.3 配置完成后再cmd命令窗口erl -version可以查看…

管理类联考——数学——汇总篇——知识点突破——数据分析——记忆

文章目录 考点记忆/考点汇总——按大纲 整体目录大纲法记忆宫殿法绘图记忆法 局部数字编码法对号不对号 归类记忆法重点记忆法歌决记忆法口诀&#xff1a;加法分类&#xff0c;类类相加&#xff1b;乘法分步&#xff0c;步步相乘。 谐音记忆法涂色 理解记忆法比较记忆法转图像记…

1997-2017年各省能源投入数据(万吨标准煤)

1997-2017年各省能源投入数据&#xff08;万吨标准煤&#xff09; 1、时间&#xff1a;1997-2017年 2、来源&#xff1a;中国统计年鉴 3、范围&#xff1a;30个省 4、指标&#xff1a;能源投入&#xff08;各省8种能源消费总量计算得出&#xff09;&#xff08;万吨标准煤&…

DeepSpeed: 大模型训练框架 | 京东云技术团队

背景&#xff1a; 目前&#xff0c;大模型的发展已经非常火热&#xff0c;关于大模型的训练、微调也是各个公司重点关注方向。但是大模型训练的痛点是模型参数过大&#xff0c;动辄上百亿&#xff0c;如果单靠单个GPU来完成训练基本不可能。所以需要多卡或者分布式训练来完成这…

华为NAT配置实例(含dhcp、ospf配置)

一、网络拓朴如下&#xff1a; 二、要求&#xff1a;PC1 能访问到Server1 三、思路&#xff1a; R2配置DHCP&#xff0c;R2和R1配OSPF&#xff0c;R1出NAT 四、主要配置&#xff1a; R2的DHCP和OSPF&#xff1a; ip pool 1gateway-list 10.1.1.1 network 10.1.1.0 mask 25…

Leetcode—7.整数反转【中等】

2023每日刷题&#xff08;十&#xff09; Leetcode—7.整数反转 关于为什么要设long变量 参考自这篇博客 long可以表示-2147483648而且只占4个字节&#xff0c;所以能满足题目要求 复杂逻辑版实现代码 int reverse(int x){int arr[32] {0};long y;int flag 1;if(x <…

JS操作DOM及CSS

JS创造于1994年&#xff0c;其目的是为浏览器显示的文档赋予动态行为。 1 Web编程基础 本节讲解如何编写Web应用中的js程序&#xff0c;如果将这些程序加载到浏览器&#xff0c;以及如何获取输入、产出输出&#xff0c;如何运行响应事件的异步代码。 1.1 js 脚本 虽然现在不…

什么是 Node.js

目标 什么是 Node.js&#xff0c;有什么用&#xff0c;为何能独立执行 JS 代码&#xff0c;演示安装和执行 JS 文件内代码 讲解 Node.js 是一个独立的 JavaScript 运行环境&#xff0c;能独立执行 JS 代码&#xff0c;因为这个特点&#xff0c;它可以用来编写服务器后端的应用…

mybatisPlus逻辑删除注解@TableLogic

当我做了一个实体类&#xff0c;字段为del_flag的逻辑删除字段&#xff0c;要通过这个字段控制数据库中的数据逻辑删除。 重写mapper中的deleteById&#xff0c; 先按id查出数据&#xff0c;在更新此数据中的del_flag字段为1&#xff0c;调用update方法更新数据。 这种方式我…

多继承的实例介绍

一、多继承同名覆盖 子类中的成员与父类中的成员同名问题&#xff0c;通过作用域分辨符&#xff08;&#xff1a;&#xff1a;&#xff09;进行限定类的访问&#xff0c;从而实现对不同类中的同名成员各自赋值。 #include<iostream> using namespace std; class A{//父…

54. 螺旋矩阵

54. 螺旋矩阵 原题链接&#xff1a;完成情况&#xff1a;解题思路&#xff1a;参考代码&#xff1a;__54螺旋矩阵 原题链接&#xff1a; 54. 螺旋矩阵 https://leetcode.cn/problems/spiral-matrix/description/ 完成情况&#xff1a; 解题思路&#xff1a; 跟59题。很类似…

python实验16_网络爬虫

实验16&#xff1a;网络爬虫 1.实验目标及要求 &#xff08;1&#xff09;掌握简单爬虫方法。 2. 实验主要内容 爬取中国票房网 ① 爬取中国票房网&#xff08;www.cbooo.cn)2019年票房排行榜前20名的电影相关数据 代码部分: import time from selenium.webdriver impor…

成为CSS选择器大师,让你的网页瞬间提升品味!

&#x1f3ac; 江城开朗的豌豆&#xff1a;个人主页 &#x1f525; 个人专栏 :《 VUE 》 《 javaScript 》 &#x1f4dd; 个人网站 :《 江城开朗的豌豆&#x1fadb; 》 ⛺️ 生活的理想&#xff0c;就是为了理想的生活 ! 目录 ⭐ 专栏简介 &#x1f4d8; 文章引言 一、选…

【tg】9 : InstanceImpl 、 虚拟的音频渲染设备FakeAudioDeviceModuleImpl

代码分布 WebRTC-Manager 线程:manager线程 G:\CDN\P2P-DEV\tdesktop-offical\Telegram\ThirdParty\tgcalls\tgcalls\InstanceImpl.h Manager 使用的是 WebRTC-Manager 线程 InstanceImpl 对Manager 的封装和调用 #

pycharm转移缓存目录

原来的缓存目录为C:\Users\86176\AppData\Local\JetBrains&#xff0c;各种配置文件、缓存文件随着pycharm的使用堆积在这里&#xff0c;导致C盘逐渐爆满。 因此需要将缓存目录转移至D盘。首先需要了解缓存目录的知识。 PyCharm 和其他 JetBrains 的 IDE 通常会有两个关键的目…

Nodejs和Node-red的关系

NPM相关知识 npm概念 npm&#xff1a;Node Package Manager&#xff0c;Node包管理器。是Node.js默认的&#xff0c;以JavaScript编写的软件包管理系统。 npm工作原理 npm的操作原理是各个官网使用npm publish把代码提交到npm的服务器&#xff0c;其他人想要使用这些代码&am…

适用于 Linux 和 Unix 的特权访问管理

凭据、SSH 密钥、服务帐户、数字签名、文件系统等内容构成了Linux 环境的关键部分&#xff0c;虽然大多数PAM供应商为基于Windows的环境提供无缝的特权访问管理&#xff0c;但它们的通用性不足以为Linux&#xff0c;Unix和*nix环境扩展相同的功能和功能。 Linux 中的root权限是…

微信小程序获取用户信息

个人博客 微信小程序获取用户信息 个人微信公众号&#xff0c;求关注&#xff0c;求收藏&#xff0c;求指错。 文章概叙 本文主要讲的是小程序获取用户信息的&#xff0c;更新测试时间是2023-10-25 更改原因 首先&#xff0c;官网上的解释是这样的&#xff0c;为了安全合…

PAM从入门到精通(二十六)

接前一篇文章&#xff1a;PAM从入门到精通&#xff08;二十五&#xff09; 本文参考&#xff1a; 《The Linux-PAM Application Developers Guide》 先再来重温一下PAM系统架构&#xff1a; 更加形象的形式&#xff1a; 七、PAM-API各函数源码详解 前边的文章讲解了各PAM-API…