select选择器组件（3）|青训营日记

这是我参与「第五届青训营 」伴学笔记创作活动的第 10天

今天做了啥子嘞

首先是又重拾了代码随想录的二叉树迭代遍历 要注意前序遍历和后序遍历的关系，前序遍历入栈时先右后左，这样出栈时才能是中左右，每次弹出栈时就要将当前节点放入结果List中，后序遍历是在前序遍历的基础上，入栈时先左后右，这样排序是中右左，再使用Collections.reverse函数将List翻转就可以得到最后左右中的结果。

而中序遍历完全是另一种逻辑，他需要不断将左子树入栈，root=root.left,然后等到root为null时，弹出栈顶的节点，将其放入List结果中，然后将root=root.right。

然后给select组件加了size属性，调用了全局的一些样式，还没有完全实现size属性，原因是一些大小间距，还有其中的一个标签我原本用的是绝对距离，如果要改变整体大小，那么符号位置也需要改变，这个还在思考使用什么方式，应该用相对于外框的距离作为padding距离

@import "../../theme/themes/default/index.scss";
@import "./mixin";
@import "./basic.scss";
#root{
    width: 250px;
}
//基础样式
.ai-select{
    font-size: $font-size-base;
    display:flex;
    padding:8px 16px;
    border-color:$border-color ;
    border:1.5px solid;
    width: 200px;
    justify-content: space-between;
    background-color:#ffffff00;
    border-radius: $border-radius;
    margin: auto;
    box-shadow: $box-shadow;
    line-height: $line-height-base;
}

.ai-select-true{
    cursor: not-allowed;
    color: $menu-item-disabled-color;
    // box-shadow: 0px 0px 3px 1px rgb(172, 172, 175) inset;
}

.ai-select-false{
    cursor: pointer;
}



.options{
    width: 230px;
    border: 1px solid #aec0bf;
    border-radius: 5px;
    margin: auto;
    box-shadow: 0px 0px 10px 0px rgb(233, 233, 237);
}
.options .ai-option{
    font-size: 14px; 
    margin-top:-1px;
    cursor: pointer;
    font-size: $font-size-base;
}
#mouse:hover{
    background-color: #aec0bf;
}
.downangle{
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-top: 8px #000000 solid;
    position: relative;
    top: 4px;
}
.upangle{
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 8px solid transparent;
    border-bottom: 8px #000000 solid;
    position: relative;
    bottom: 4px;
}
#mouse {
    display: flex;
    align-items: center;
    height: 30px;
    margin: 5px;
} 
button{
    border: #ffffff 0.5px;
    background-color: #ffffff;
    position: relative;
}
.ai-select-option-lg , .ai-select-lg{
    @include select-size(
        $line-height-lg,
        $ai-select-padding-x-lg,
        $ai-select-padding-y-lg,
        $font-size-lg,
        $border-radius-lg
    )
}

.ai-select-sm{
    @include select-size(
        $line-height-sm,
        $ai-select-padding-x-sm,
        $ai-select-padding-y-sm,
        $font-size-sm,
        $border-radius-sm,
    )
}
.ai-select-option-sm {
    @include select-size(
        $line-height-sm,
        $ai-select-padding-x-sm,
        $ai-select-padding-y-sm,
        $font-size-sm,
        $border-radius-sm,
    )
}