先看下开发完成的功能
本来想借助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 | 是否隐藏搜索框 | false |
autoQuery | 是否输入后就触发 | true |
width | 设置输入框宽度值 | 210 |
delay | 请求延时间隔(autoQuery为false时) | 500 |