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

前端之家收集整理的这篇文章主要介绍了Vue实现typeahead组件功能(非常靠谱)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前言

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

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

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

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

效果

这里写图片描述

实现的功能

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

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

3: 支持列表过滤搜索

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

5: 支持placeholder的传入

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

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

用法

  • asyncData:响应的数据,也就是选中的..回来是一个对象
  • mapData : 搜索的列表数据,肯定是外部传入了…
  • mapData : 列表值映射

代码

selectSearch.vue

{{item[mapDataFormat.label]}}

查询到,请重新输入!

总结

以上所述是小编给大家介绍的Vue实现typeahead组件功能(非常靠谱)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/36817.html

猜你在找的Vue相关文章