《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…

doris的be其中失败的原因

doris的be其中失败的原因 修改limits文件 vim /etc/security/limits.conf1在文件的末尾处添加或者修改 * soft nofile 204800 * hard nofile 204800 * soft nproc 204800 * hard nproc 204800vim /etc/sysctl.conf#添加 fs.file-max 6553560 vm.max_map_count 2000000 1 2…

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来完成训练基本不可能。所以需要多卡或者分布式训练来完成这…

LVS负载均衡集群和DR模式集群部署

DR模式 LVS负载均衡群集 数据包流向分析 &#xff08;1&#xff09;客户端发送请求到 Director Server&#xff08;负载均衡器&#xff09;&#xff0c;请求的数据报文&#xff08;源 IP 是 CIP,目标 IP 是 VIP&#xff09;到达内核空间。 &#xff08;2&#xff09;Director…

HTML5和HTML的区别

HTML5的概念分为广义和狭义两种。 狭义的概念HTML&#xff15;是指HTML语言的第5个版本&#xff0c;而HTML是指&#xff15;之前的版本。 广义的概念HTML5是指由HTML&#xff15;、CSS3、JavaScript所组成的开发环境。而HTML是指HTML语言本身。 1、HTML&#xff15;与HTML狭…

华为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;它可以用来编写服务器后端的应用…

k8s-实战——zookeeper的部署

文章目录 ZooKeeper简介zkyaml文件pvc.yaml创建PVCzk.yaml创建zk集群服务zk集群检查检查zk集群状态问题记录解决方式ZooKeeper简介 Apache ZooKeeper 是一个分布式的开源协调服务,用于分布式系统。 ZooKeeper 允许你读取、写入数据和发现数据更新。 数据按层次结构组织在文件…

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{//父…

算法----递增的三元子序列

题目 给你一个整数数组 nums &#xff0c;判断这个数组中是否存在长度为 3 的递增子序列。 如果存在这样的三元组下标 (i, j, k) 且满足 i < j < k &#xff0c;使得 nums[i] < nums[j] < nums[k] &#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false…

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…

力扣labuladong——一刷day06

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、力扣322. 零钱兑换二、力扣509. 斐波那契数三、力扣46. 全排列四、力扣51. N 皇后五、力扣52. N 皇后 II 前言 一、力扣322. 零钱兑换 class Solution {pu…

VUE3新组件 — Vue3

1. 新组件 1) Fragment(片断) 在Vue2中: 组件必须有一个根标签在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中好处: 减少标签层级, 减小内存占用 <template><h2>aaaa</h2><h2>aaaa</h2> </template>2) T…