mint-ui 输入框按下按键执行查询

时间:2021-09-09 19:49:44

环境:vue、mint-ui

功能:一个输入框,按下按键之后就执行某个功能。

截图:一个输入框

mint-ui 输入框按下按键执行查询

输入框html:

<mt-search v-model="query" cancel-text="" placeholder="提取码">   // mt-search 
基本函数:
debounce (func, delay) {
let timer
return function (...args) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
func.apply(this, args)
}, delay)
}
}

查询函数:

getData () {
console.log('执行查询。。。。。。')
},

主要函数:

 created() {
this.$watch('query', this.debounce(newQuery => {
if (newQuery) {
setTimeout(() => {
this.getData()
}, 20)
}
}, 200))
},