vue1.0- autocomplate
2017-08-09 本文已影响0人
幕后煮屎者p
自动补全插件有很多，比如jquery.typeahead.js，vue2.0中可以用element的组件库，vue1.0中目前还没发现好的组件库，就自己模仿写一个：
使用vue1.0脚手架。需要安装lodash，来处理搜索，一个完整的组件需要要有独立的事件，方法和功能，输入时根据输入的字符对数据源进行模糊检索，点击选择数据：
- 功能描述：
- 点击输入框，弹出下拉框，弹出source中的数据
- 选择下拉框中的数据，关闭下拉框
- 组件失去焦点，关闭下拉框（不是输入框失去焦点）
- 输入的中文转化为拼音首字母进行搜索
- 搜索排序还没解决...（js不知道怎么实现达到高效率，可以使用ajax，动态加载数据，排序问题交给后台）
- 组件参数：
| 名称 | 类型 | 默认 | 描述 |
|---|---|---|---|
| source | Array | [] | 数据源，是一个对象数组 |
| searchFields | String | '' | 搜索时搜索的字段，是一个逗号分割的字符串，格式 field1,field2,....field3 |
| txtFields | String | '' | 选择时显示的字段，是一个逗号分割的字符串，格式 field1,field2,....field3 |
- 事件列表：
| 事件名称 | 参数 | 描述 |
|---|---|---|
| autoFocus | 组件获得焦点 | |
| autoBlur | 组件失去焦点 | |
| autoKeyup | 组件键盘事件 | |
| autoClick | 组件单机事件 | |
| autoDownDropOpen | 打开下拉框 | |
| autoDownDropClose | 关闭下拉框 | |
| autoSelected | 选择数据执行事件 | |
| txtClick | 输入框单机事件 | |
| txtFocus | 输入框获得焦点 | |
| txtBlur | 输入框失去焦点 | |
| txtKeyup | 输入框键盘事件 |
- 目录结构
Autocomplate
--auto-full.vue // 组件
--searchDate.js // 搜索接口
写的比较烂~~，后续在优化
