vue简单搜索组件 防抖函数

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) // 每次进来的时候都将之前的清除掉，如果还没到一秒的时候就将之前的清除掉，这样就不会触发之前setTimeout绑定的事件， 如果超过一秒，之前的事件就会被触发下次进来的时候同样清除之前的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>