vue简单搜索组件 防抖
<template>
<div style="width: 100%;">
<input v-model="keyWord" type="text" :placeholder="placeholder" style="padding: 3px;border: none;outline: none;width: 100% !important;">
</div>
</template>
<script>
export default {
name: 'InputSearch',
components: {
},
props: {
placeholder: {
default: '输入搜索关键词'
}
},
data() {
return {
keyWord: ''
}
},
watch: {
keyWord(newValue, oldValue) {
const vm = this
clearTimeout(vm.timer)
vm.timer = setTimeout(function() {
vm.$emit('search', newValue)
vm.$emit('input', newValue)
}, 1000)
}
},
created() {
},
methods: {
clearKeyword() {
this.keyWord = ''
}
}
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>