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

前言

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

问题

  • 点击空白处,下拉列表可监听并关闭;
  • 但在 Cesium 中无法监听和关闭;

解决方案

  • 代码 2 行,初始化时监听 body 单击事件;
  • 代码 7 行,获取全局下拉列表;
  • 代码 11 - 14 行,仅当列表显示时,触发 click 事件;
javascript 复制代码
// 初始化时监听 body 单击事件
document.getElementsByTagName('body')[0].onclick = () => {
    // 获取 el-select
    const 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;
            }
        }
    })
};
相关推荐
聪明的墨菲特i22 分钟前
VUE组件学习 | 六、v-if, v-else-if, v-else组件
前端·vue.js·学习·前端框架·vue
Wonderful_Wan81 小时前
【前端项目工程】Uni-app 离线打包apk
前端·uni-app
木子七1 小时前
Js内建对象
前端·javascript
GDAL2 小时前
HTML入门教程2:HTML发展历史
前端·html
前端Hardy2 小时前
HTML&CSS:3D旋转动画机器人摄像头
前端·css·3d·html
WwangXue2 小时前
mac如何下载 测试旧版chrome兼容问题
前端·chrome
浏览器爱好者2 小时前
Chrome和Firefox如何保护用户的浏览数据
前端·chrome·firefox
Front思2 小时前
根据输入的详细地址解析经纬度
前端·javascript
光影少年2 小时前
前端文件上传组件流程的封装
前端·reactjs
好奇的候选人面向对象2 小时前
v-input-limit
javascript·vue.js·elementui