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

AvatarGiser2024-04-24 14:39

前言

仅在 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;
            }
        }
    })
};