美文网首页
自定义select组件

自定义select组件

作者: 我_巨可爱 | 来源:发表于2017-11-07 15:23 被阅读0次

    模仿原生 select 写成的组件,有统一的样式,有自定义行为

    思路

    关于样式

    由于搜索框有多种状态,比如,下拉框是否打开(open),是否可输入(search),是否是单选(single),是否加载中(loading)等。每种状态对应的样式是不同的

    1. 将类样式名和数据绑定到一起,通过数据,控制是否要添加该样式名
    2. 将这些类样式名,添加到顶层 div 上

    关于输入和呈现

    input 只管输入,即使有默认值,也不是在input中呈现,而是通过span元素呈现

    1. 输入是在 input 元素
    2. 显示选中项,在 span 元素中。当多选的时候,span 元素上需要关闭按钮
    3. 由于选中后有span元素,因此,会将 input 元素挤到下方
    4. 当下拉框显示的时候,当是单选的时候,span元素会绝对定位

    混入

    1. 响应 updownenter
    2. 通过监听当先索引值,响应是否要自动滚动
    3. loading 的状态,开放出 slotonSearch 函数

    数据

    1. search, 只是盛放 input 元素的 value
    2. mutableValue, 是默认选中哪些项,然后通过 span 显示
    3. mutableOptions,是下拉框的选项
    4. mutableLoading, 是加载中的控制项

    相关文章

      网友评论

          本文标题:自定义select组件

          本文链接:https://www.haomeiwen.com/subject/knwlmxtx.html