模仿原生 select 写成的组件,有统一的样式,有自定义行为
思路
关于样式
由于搜索框有多种状态,比如,下拉框是否打开(open),是否可输入(search),是否是单选(single),是否加载中(loading)等。每种状态对应的样式是不同的
- 将类样式名和数据绑定到一起,通过数据,控制是否要添加该样式名
- 将这些类样式名,添加到顶层 div 上
关于输入和呈现
input 只管输入,即使有默认值,也不是在input中呈现,而是通过span元素呈现
- 输入是在 input 元素
- 显示选中项,在 span 元素中。当多选的时候,span 元素上需要关闭按钮
- 由于选中后有
span
元素,因此,会将 input 元素挤到下方 - 当下拉框显示的时候,当是单选的时候,
span
元素会绝对定位
混入
- 响应
up
,down
,enter
键 - 通过监听当先索引值,响应是否要自动滚动
- loading 的状态,开放出
slot
和onSearch
函数
数据
- search, 只是盛放 input 元素的 value
- mutableValue, 是默认选中哪些项,然后通过 span 显示
- mutableOptions,是下拉框的选项
- mutableLoading, 是加载中的控制项