建议使用以下浏览器,以获得最佳体验。 IE 9.0+以上版本 Chrome 31+谷歌浏览器 Firefox 30+ 火狐浏览器

智能云安全管理服务商

帮助中心

>服务器  > 

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 : 列表值映射



以上是否解决了您的问题


©Copyright © 2022 YOUZIYUN.COM. All Rights Reserved. 柚子雲版权所有 柚子雲網絡科技有限公司