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

news2024/11/15 9:18:35
前提
  • 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.coloradmin.cn/o/1135278.html

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

相关文章

【uniapp】仿微信支付界面

效果图 完整代码 <template><view class="my-pay-page"><view :style=

opencv python 环境安装问题

问题描述&#xff1a; 在centos上使用python的某个库&#xff0c;有用到opencv&#xff0c;但在import时报以下错误&#xff1a; ImportError: libGL.so.1: cannot open shared object file: No such file or directory 若是系统可以连接外网&#xff0c;则只需一条命令&…

kubeadm方式部署单节点kubernetes环境

------实验所需机器 master&#xff08;2C/4G&#xff0c;cpu核心数要求大于2&#xff09; 20.0.0.101 docker、kubeadm、kubelet、kubectl、flannel node01&#xff08;2C/2G&#xff09; 20.0.0.102 docker、kubeadm、kubelet、kubectl、flannel node02&#xff…

基于 ARM+FPGA+AD平台的多类型同步信号采集仪开发及试验验证(二)板卡总体设计

2.2 板卡总体设计 本章开发了一款基于 AD7193RJ45 的多类型传感信号同步调理板卡&#xff0c;如图 2.4 所 示&#xff0c;负责将传感器传来的模拟电信号转化为数字信号&#xff0c;以供数据采集系统采集&#xff0c;实现了 单通道自由切换传感信号类型与同步采集多类型传…

excel巧用拼接函数CONCAT输出JSON、SQL字符串

一、前言 工作中有时候需要用Excel对数据进行组装&#xff0c;需要输出JSON或者SQL语句&#xff0c;然后通过脚本或Java程序完成一些特定功能&#xff0c;总结了一下用到的函数&#xff0c;方便以后使用。这里使用的是WPS软件。 二、输出JSON 例如&#xff1a;需要将几列数据…

【Proteus仿真】【STM32单片机】智能语音家居陪护机器人

文章目录 一、功能简介二、软件设计三、实验现象联系作者 一、功能简介 本项目使用Proteus8仿真STM32单片机控制器&#xff0c;使用OLED显示模块、红外传感器、蜂鸣器、DS18B20温度传感器&#xff0c;风扇LED、语音识别模块等。 主要功能&#xff1a; 系统运行后&#xff0c;…

asp.net古代服饰系统VS开发sqlserver数据库web结构c#编程包含购物答题功能点

一、源码特点 asp.net 古代服饰系统 是一套完善的web设计管理系统(含购物 答题)&#xff0c;系统采用mvc模式&#xff08;BLLDALENTITY&#xff09;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境 为vs2010&#xff0c;数据库为sqlserver…

华为数通方向HCIP-DataCom H12-831题库(多选题:81-100)

第81题 经典的网络转发方式是基于路由表转发。OpenFlow交换机的转发方式是基于流表转发。对于这两种转发方式,以下说法正确的有哪些选项? A、流表的匹配方式是同时匹配流量的MAC地址和IP地址。 B、路由表的匹配方式是匹配拥有最长掩码的目的网段路由 C、流表是变长的。一台网…

双十一购物狂欢节准备好买什么了吗?双十一这些好物不能错过

双十一是电商节&#xff0c;各大电商平台都会推出各种促销活动&#xff0c;吸引消费者抢购商品。在这个特别的时刻&#xff0c;许多人都迫不及待地开始筹备自己的购物清单&#xff0c;想要趁着这个机会购买自己心仪的商品。那么&#xff0c;在这个双十一购物狂欢节&#xff0c;…

MATLAB中polyval函数用法

目录 语法 说明 示例 计算几个点处的多项式值 对四次多项式求积分 具有误差估计值的线性回归 使用中心化和缩放改善数值属性 polyval函数的功能是多项式计算。 语法 y polyval(p,x) [y,delta] polyval(p,x,S) y polyval(p,x,[],mu) [y,delta] polyval(p,x,S,mu) …

招商平台小程序开发制作方案

招商平台小程序旨在为企业提供一个便捷、高效的招商信息发布和合作伙伴寻找的平台。通过整合企业资源&#xff0c;打造一个集信息发布、信息筛选、在线沟通、合作洽谈等功能于一体的综合性招商服务平台。 一、招商平台小程序的用户需求 1. 企业用户&#xff1a;需要一个便捷的…

华为升腾C92安装黑群晖

华为升腾C92安装黑群晖 升腾C92&#xff1a;几年前完小校配置了一批班班通&#xff0c;现在基本已退出历史舞台&#xff0c;这样一批小电脑闲置吃灰也挺可惜的&#xff0c;总想再利用起来。&#xff08;如果手头没有的话&#xff0c;某宝上面二手货大约250元&#xff09; CPU类…

什么是React Router?它的作用是什么?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

《从零开始大模型开发与微调 :基于PyTorch与ChatGLM》简介

内 容 简 介 大模型是深度学习自然语言处理皇冠上的一颗明珠&#xff0c;也是当前AI和NLP研究与产业中最重要的方向之一。本书使用PyTorch 2.0作为学习大模型的基本框架&#xff0c;以ChatGLM为例详细讲解大模型的基本理论、算法、程序实现、应用实战以及微调技术&#xff0c;…

Linux - 进程状态 - Linux 当中的进程状态是如何维护的?

进程状态 一个进程在 系统当中有很多的状态&#xff0c;比如&#xff1a;一个进程正在被cpu执行&#xff0c;那这个进程就是一个 r 状态&#xff1b;一个进程已经准备好了&#xff0c;但是其中的运行这个进程需要的资源没有准备好&#xff0c;那么这个进程一人不能运行。 比如…

【2021集创赛】平头哥杯三等奖:智能头盔设计

本作品参与极术社区组织的有奖征集|秀出你的集创赛作品风采,免费电子产品等你拿~活动。 杯赛题目&#xff1a;基于平头哥无线智能开发板的创新应用项目设计 参赛组别&#xff1a;A组、B组 赛题内容&#xff1a; 本次大赛将结合玄铁开源E902处理器以及内含玄铁803处理器的TXW830…

JetBrains IntelliJ IDEA 2023:打造高效开发环境(IDE)的不二之选

您是否正在寻找一款能够帮助您更加高效地进行项目开发的集成开发环境&#xff08;IDE&#xff09;&#xff1f;那么&#xff0c;JetBrains IntelliJ IDEA 2023可能是您的最佳选择。 IntelliJ IDEA是一款为Java开发者准备的综合性IDE&#xff0c;以其强大的智能代码助手和用户友…

Maven实战-私服搭建详细教程

Maven实战-私服搭建详细教程 1、为什么需要私服 首先我们为什么需要搭建Maven私服&#xff0c;一切技术来源于解决需求&#xff0c;因为我们在实际开发中&#xff0c;当我们研发出来一个 公共组件&#xff0c;为了能让别的业务开发组用上&#xff0c;则搭建一个远程仓库很有…