自定义select组件

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

思路

关于样式

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

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

关于输入和呈现

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

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

混入

  1. 响应 up,down,enter键
  2. 通过监听当先索引值,响应是否要自动滚动
  3. loading 的状态,开放出 slot 和 onSearch 函数

数据

  1. search, 只是盛放 input 元素的 value
  2. mutableValue, 是默认选中哪些项,然后通过 span 显示
  3. mutableOptions,是下拉框的选项
  4. mutableLoading, 是加载中的控制项
最后编辑于 :
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 845评论 0赞 9
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 137,249评论 19赞 139
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 16,853评论 4赞 61
  • 独居和独处不同。独居是空间上的一个人,独处是心灵上一个人。像极了英语中的lonely 和 alone的区别。我...
    朵墨阅读 561评论 0赞 0
  • 感恩今天丽娜,文静萍姐这些小伙伴的鼓励。并及时解决了我的困惑。让我学习为人处世观察真善美的道理!社会就是一个大学...
    悦心慧儿阅读 242评论 0赞 0

友情链接更多精彩内容