antdv select下拉菜单自由扩展—添加输入框的使用问题

背景
antdv select 官方使用dropdownRender对下拉菜单进行自由扩展,
为了解决点击 dropdownRender 里的内容浮层关闭的问题,官方建议添加preventDefault,但是这样扩展内容里的输入框无法聚焦
antdv select下拉菜单自由扩展—添加输入框的使用问题_第1张图片

一开始采取的方案是手动给自定义的输入框focus事件,但是基于页面只会有一个focus的原则,会因此触发select的输入框blur,反而导致下拉菜单收起,最后还是采取手动控制select的open属性来解决了问题

解决思路

  • 在select上添加一个透明的div作为select替身,只用来控制open,这样不用调用select组件的blur和focus,避免和原组件的处理有冲突
  • 选中选项(单选时)或者点击select控件外的地方操控open = false (dropdownRender处阻止冒泡stopPropagation,这样便于监听除下拉选项的全局事件)

实现效果
antdv select下拉菜单自由扩展—添加输入框的使用问题_第2张图片

具体代码如下
selectInput.vue



selectInput.less

.select-wrapper {
    position: relative;
    .select_overlap {
        cursor: pointer;
        height: 32px;
        width: 300px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: 0;
    }
}

你可能感兴趣的:(使用总结,antdv,select,前端)