我在Vue模板中有一个简单的输入框，我想使用debounce或多或少像这样:
<input type="text" v-model="filterKey" debounce="500">
然而，在Vue 2中debounce属性已被弃用。建议只说:“使用v-on:输入+第三方反弹功能”。
如何正确地实现它?
我尝试使用lodash, v-on:input和v-model来实现它，但我想知道是否有可能没有额外的变量。
在模板:
<input type="text" v-on:input="debounceInput" v-model="searchInput">
在脚本:
data: function () {
return {
searchInput: '',
filterKey: ''
}
},
methods: {
debounceInput: _.debounce(function () {
this.filterKey = this.searchInput;
}, 500)
}
然后在计算道具中使用过滤键。
当前回答
我可以用很少的实现来使用debounce。
我使用Vue 2.6.14与boostrap-vue:
把这个pkg加到你的包裹里。json: https://www.npmjs.com/package/debounce
将此添加到main.js:
import { debounce } from "debounce";
Vue.use(debounce);
在我的组件中，有这样的输入:
<b-form-input
debounce="600"
@update="search()"
trim
id="username"
v-model="form.userName"
type="text"
placeholder="Enter username"
required
>
</b-form-input>
它所做的就是调用search()方法，而搜索方法使用表单。执行搜索的用户名。
其他回答
如果你需要一个非常简约的方法，我做了一个(最初从vuejs-tips分叉也支持IE)，可在这里:https://www.npmjs.com/package/v-debounce
用法:
<input v-model.lazy="term" v-debounce="delay" placeholder="Search for something" />
然后在你的组件中:
<script>
export default {
name: 'example',
data () {
return {
delay: 1000,
term: '',
}
},
watch: {
term () {
// Do something with search term after it debounced
console.log(`Search term changed to ${this.term}`)
}
},
directives: {
debounce
}
}
</script>
我使用debounce NPM包并像这样实现:
<input @input="debounceInput">
methods: {
debounceInput: debounce(function (e) {
this.$store.dispatch('updateInput', e.target.value)
}, config.debouncers.default)
}
使用lodash和问题中的示例，实现如下所示:
<input v-on:input="debounceInput">
methods: {
debounceInput: _.debounce(function (e) {
this.filterKey = e.target.value;
}, 500)
}
要创建debpublished方法，你可以使用computed，这样它们就不会在组件的多个实例之间共享:
<template>
<input @input="handleInputDebounced">
<template>
<script>
import debounce from 'lodash.debouce';
export default {
props: {
timeout: {
type: Number,
default: 200,
},
},
methods: {
handleInput(event) {
// input handling logic
},
},
computed: {
handleInputDebounced() {
return debounce(this.handleInput, this.timeout);
},
},
}
</script>
你也可以让它与不受控制的v-model一起工作:
<template>
<input v-model="debouncedModel">
<template>
<script>
import debounce from 'lodash.debouce';
export default {
props: {
value: String,
timeout: {
type: Number,
default: 200,
},
},
methods: {
updateValue(value) {
this.$emit('input', value);
},
},
computed: {
updateValueDebounced() {
return debounce(this.updateValue, this.timeout);
},
debouncedModel: {
get() { return this.value; },
set(value) { this.updateValueDebounced(value); }
},
},
}
</script>
如果你可以将debounce函数的执行移动到某个类方法中，你可以使用utils-decorators lib中的decorator (npm install——save utils-decorators):
import {debounce} from 'utils-decorators';
class SomeService {
@debounce(500)
getData(params) {
}
}
很简单，没有lodash
handleScroll: function() {
if (this.timeout)
clearTimeout(this.timeout);
this.timeout = setTimeout(() => {
// your action
}, 200); // delay
}
