npm i -g npm
npm i --save lodash
import _ from 'lodash'
我这里 只用了 _.debounce(function(){},300)
300毫秒后,在执行函数方法。
// 函数延时执行,需要 npm 安装一下
// query 是输入的内容,done为回调函数,
// 判断 cities 所有城市列表,是否存在,
// done 的回调函数,开始执行,过滤,
// includes 有就是true,没有就是false ,但是字符串区分大小写
// 原本 是用indexOf(query)>-1 来判断有没有的,
querySearchAsync: _.debounce(async function (query, cb) {
const _this = this
if (_this.cities.length) {
cb(_this.cities.filter((item) => {
return item.value.includes(query)
}))
} else {
// 没有cities数据时,那么我们需要请求数据
const { status, data: { city } } = await _this.$axios.get('/geo/city')
if (status === 200) {
_this.cities = city.map((item) => {
return {
// 使用map,数据结构改变一下
value: item.name
}
})
cb(_this.cities.filter((item) => {
return item.value.includes(query)
}))
} else {
_this.cities = []
}
}
}, 300),