下拉列表的实现
0 Comments用别人的组件总有各种不可控的问题,而且不好维护,还是造轮子比较舒畅。
下拉列表是工作中经常用到的一个功能,点击按钮,显示下拉列表,点击列表中的项目显示对应的值到按钮中,这是下拉列表的常用交互。这里的一个比较有意思的点就是如何在点击别的地方时关闭列表。我采用的方法是监听组件最外层的 blur 事件,当该组件失去焦点时,关闭列表。由于按钮用的是 div 实现,默认 div 是没有 blur 事件的,这里添加一个 tabindex 属性, blur 就有效了。
demo:
<!-- html --> |
selectItem (item) { |
三、Demo 地址
Demo => 媒体 => 列表控件
本文标题:下拉列表的实现
文章作者:Canace
发布时间:2019-09-01
最后更新:2025-05-17
原始链接:https://canace.site/%E4%B8%8B%E6%8B%89%E5%88%97%E8%A1%A8%E7%9A%84%E5%AE%9E%E7%8E%B0/
版权声明:转载请注明出处
分享