15
Vue实现typeahead组件功能(非常靠谱)

前言

之前那个typeahead写的太早,不满足当前的业务需求。

而且有些瑕疵,还有也不方便传入数据和响应数据..

于是就推倒了重来,写了个V2的版本

看图,多了一些细节的考虑;精简了实现的逻辑代码

效果图

这里写图片描述

实现的功能

1: 鼠标点击下拉框之外的区域关闭下拉框

2: 支持键盘上下键选择,支持鼠标选择

3: 支持列表过滤搜索

4: 支持外部传入列表JSON格式的映射

5: 支持placeholder的传入

6: 选中对象的响应(.sync vue2.3的组件通讯的语法糖)

7: 箭头icon的映射,感觉作用不大,移除了

用法


1234567<select-search style="max-width:195px"placeholder="请选择广告主":asyncData.sync="adHostData":mapData="adHostDataList":mapDataFormat="{label:'userName',value:'userId'}"></select-search>
  • asyncData:响应的数据,也就是选中的..回来是一个对象

  • mapData : 搜索的列表数据,肯定是外部传入了…

  • mapData : 列表值映射


这条帮助是否解决了您的问题? 已解决 未解决

提交成功!非常感谢您的反馈,我们会继续努力做到更好! 很抱歉未能解决您的疑问。我们已收到您的反馈意见,同时会及时作出反馈处理!