vue点击弹框搜索列表功能

先看下开发完成的功能本来想借助element-ui里的 el-select和el-input组合来做但是在input框里面输入内容不能用上下键选择到具体搜出来的列表还有一个问题是当用上下键操作时移到最后一行再回到第一行的时候它会类似锚点一样定位到第一行从而把input框卷入到不可见的区域去了所以觉得这样的体验不是很好，自己就重新做了一个已经上传了到npm上去了npm下载地址npm install –save v-select-search引用import ‘v-select-search/lib/v-select-search.css’;import vSelectSearch from ‘v-select-search’;Vue.use(vSelectSearch);demo<template> <div style=“width:250px;overflow:hidden;margin:250px auto;"> <ct-select v-model=“text” @getSearchName=“getName”> <ct-option v-for="(item, index) of dataList” :key=“index” :value=“item.value” :label=“item.label”> </ct-option> </ct-select> </div></template><script type=“text/javascript”> import axios from ‘axios’; export default { name: ‘’, data() { return{ text: ‘’, dataList:[], } }, mounted() { axios.get(’/v2/book/search?q=vue&alt=json&start=1&count=45’) .then((data)=>{ this.dataList = []; for(let v of data.data.books) { this.dataList.push({ value: v.id, label: v.title }) } }) .catch(function(error){ console.log(error); }); }, methods: { getTextHandler() { console.log(this.text); }, getName(val) { axios({ method:‘POST’, url:’/v2/book/search’, data:{ q: val, alt:‘json’, start: 1, count: 15 } }).then((data)=>{ this.dataList = []; for(let v of data.data.books) { this.dataList.push({ value: v.id, label: v.title }) } }) .catch(function(error){ console.log(error); }); }, } }</script>基本配置参数功能默认值getSearchName获取搜索文本 data数据格式 [{label: ‘飞机’, value: 1}] visibleInput是否隐藏搜索框falseautoQuery是否输入后就触发truewidth设置输入框宽度值210delay请求延时间隔(autoQuery为false时)500git地址