vue2 使用el-input 帮我封装一个类似于百度搜索框的组件,要求具有防抖和节流功能
时间: 2024-02-21 21:01:27 浏览: 21
vue实现百度搜索功能
5星 · 资源好评率100%
好的,这是一个使用 Vue2 和 ElementUI 的搜索框组件,具有防抖和节流功能:
```vue
<template>
<el-input v-model="value" placeholder="请输入搜索内容" @input="handleInput" />
</template>
<script>
export default {
data() {
return {
value: '',
timer: null,
};
},
methods: {
handleInput() {
// 防抖
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(() => {
this.$emit('search', this.value);
}, 500);
// 节流
// if (!this.timer) {
// this.timer = setTimeout(() => {
// this.$emit('search', this.value);
// this.timer = null;
// }, 500);
// }
},
},
};
</script>
```
在父组件中,你可以监听 `search` 事件并执行搜索操作:
```vue
<template>
<div>
<BaiduSearchBox @search="handleSearch" />
<div v-if="results.length">
<h2>搜索结果:</h2>
<ul>
<li v-for="result in results" :key="result">{{ result }}</li>
</ul>
</div>
</div>
</template>
<script>
import BaiduSearchBox from '@/components/BaiduSearchBox.vue';
export default {
components: {
BaiduSearchBox,
},
data() {
return {
results: [],
};
},
methods: {
handleSearch(keyword) {
// 执行搜索操作
// ...
this.results = ['result1', 'result2', 'result3'];
},
},
};
</script>
```
注意:在代码中,我将防抖的时间间隔设置为 500 毫秒,你可以根据需要进行调整。如果你想使用节流,可以将注释部分的代码取消注释并注释掉防抖的部分。
阅读全文