自定义select组件

2017-11-07  本文已影响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, 是加载中的控制项
上一篇 下一篇

猜你喜欢

热点阅读