@frontend_worker/search-selector/src/styles/components/searchSelector.less

《远程搜索+单选》组件区别于element-ui或iview组件库的select远程搜索， ①将头部显示的值和下拉选项显示的值独立开来， ②避免远程加载时头部默认值显示异常， ③支持插槽自定义 ④将搜索框值放置于下拉弹框里面

// @primary-color: #2d8cf0;

.zz-select-result(){
    max-height:200px;
    overflow: hidden;
    ul{
        max-height:160px;
        padding: 5px 0;
        overflow: auto;
    }
    li{
        padding: 7px 4px 7px 8px;
        line-height: 16px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        cursor: pointer;
        &.item-active{
            background-color: #f8f8f8;
        }
        &:hover{
            background-color: #f8f8f8;
        }
        &.loading-tip-item{
            cursor: auto;
            padding-top:17px;
            padding-bottom:17px;
            text-align: left;
            font-size: 14px;
            color: #424656;
            .zz-spin{
                display: inline-block;
            }
            &:hover{
                background-color: transparent;
            }
        }
        &.no-found-item{
            text-align: center;
            color:#424656;
            &:hover{
                background-color: transparent;
            }
        }
    }
}

.zz-search-selector{
    font-size: 14px;
    line-height: 32px;
    height: 32px;
    vertical-align: middle;
    display:inline-block;
    width: 100%;
    .demo-spin-icon-load{
        animation: ani-demo-spin 1s linear infinite;
    }
    @keyframes ani-demo-spin {
        from { transform: rotate(0deg);}
        50%  { transform: rotate(180deg);}
        to   { transform: rotate(360deg);}
    }
    .zz-dropdown{
        position: relative;
        display: block;
        .zz-select-dropdown{
            min-width: 100%;
            max-width: 150%;
            padding:5px;
        }
        .zz-select-search{
           position: relative;
           height: 32px;
           .show-selected{
                &.show-selected-disabled{
                    background: #f3f3f3;
                    color: #ccc;
                    cursor: not-allowed;
                }
                &.show-selected-enabled:hover{
                    border-color: @primary-color;
                    transition: all 0.3s;
                }
                position: absolute;
                z-index:2;
                left:0;
                top: 0;
                display: inline-block;
                width:100%;
                vertical-align: top;
                height: 32px;
                line-height: 30px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                padding-left: 10px;
                padding-right: 24px;
                border: 1px solid #dcdee2;
                border-radius: 2px;
                .zz-icon {
                    width: 24px;
                    height: 32px;
                    font-size: 22px;
                    line-height: 32px;
                    position: absolute;
                    right: -1px;
                    top:-1px;
                    display: none;
                }
                &:hover{
                    .zz-icon{
                        cursor: pointer;
                        display: block;
                    }
                }
            }
            .zz-spin-fix {
                background: none;
                .zz-spin-main {
                    right: 0;
                    left: auto;
                    transform: translate(0,-50%);
                }
            }
        }
    }
    .zz-select-result{
        .zz-select-result();
    }
}
.transfer-search-selector{
    .zz-select-result{
        .zz-select-result();
    }
    &.zz-select-dropdown{
        padding:5px;
        overflow: hidden;
    }
}