自定义select组件

模仿原生 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, 是加载中的控制项
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

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

友情链接更多精彩内容