yued-fe/lulu

Edge主题中Select下拉框无法弹出问题

Wu-Qin-Hao opened this issue · 1 comments

import 'lu2/theme/edge/css/common/ui/Select.css';
import 'lu2/theme/edge/js/common/ui/Select.js';
<div
    class="ccbimGIS__settingStyle__box ${this.state.lightSettingVisible && 'block'}"
    onClick=${(e: any) => e.stopPropagation()}
  >
    <div class="tip__trangle__right"></div>
    <div class="settingStyle__list">
      <b class="settingStyle__name">光源类型</b>
      <select
        is="ui-select"
        onChange="${(e: any) => this.setCustomLight('lightType', parseFloat(e.target.value))}"
        width="120"
      >
        <option
          value="${LightTypeEnum.sunLight}"
          selected="${this.state.sceneParamOptions.environmentParams.sceneLightParams.lightType ===
          LightTypeEnum.sunLight}"
        >
          太阳光
        </option>
        <option
          value="${LightTypeEnum.headLight}"
          selected="${this.state.sceneParamOptions.environmentParams.sceneLightParams.lightType ===
          LightTypeEnum.headLight}"
        >
          头光源
        </option>
      </select>
    </div>
    <div class="settingStyle__list">
      <b class="settingStyle__name">光照颜色</b>
      <input
        type="color"
        style="width: 110px"
        value=${this.state.sceneParamOptions.environmentParams.sceneLightParams.lightColor}
        onChange=${(e: any) => this.setCustomLight('lightColor', e.target.value)}
      />
    </div>
    <div class="settingStyle__list">
      <b class="settingStyle__name">光照强度</b>
      <input
        type="range"
        value="${this.state.sceneParamOptions.environmentParams.sceneLightParams.lightIntensity}"
        min="0"
        max="50"
        step="1"
        is="ui-range"
        data-tips="${this.state.sceneParamOptions.environmentParams.sceneLightParams.lightIntensity}"
        oninput=${(e: any) => this.setCustomLight('lightIntensity', parseFloat(e.target.value))}
      />
      <b class="settingStyle__value"
        >${this.state.sceneParamOptions.environmentParams.sceneLightParams.lightIntensity}</b
      >
    </div>
  </div>

select组件在前面使用阻止冒泡后,下拉弹出无法显示

感谢反馈,这个问题我要想想,为了更高的性能,点击识别是绑定在 document 上的。

更新:已改为按钮上绑定 click。