Vue input搜索框防抖 Vant组件

结构：

<template>
    <div>
        <!-- 搜索页面头部 -->
        <div class="search-header">
            <!-- 后退按钮 -->
            <van-icon name="arrow-left" color="white" size="0.48rem" class="goback" @click="$router.back()" />
            <!-- 搜索组件 -->
            <van-search placeholder="请输入搜索关键词" background="#007BFF" shape="round" v-xixi v-model.trim="keyword"
                @input="inputFn" />
        </div>
    </div>
</template>

js:

<script>
export default {
  data () {
    return {
      keyword: '', // 搜索关键字
      timer: null // 防抖
    }
  },
  methods: {
    // 搜索框
    inputFn () {
      clearInterval(this.timer)
      this.timer = setTimeout(() => {
        if (this.keyword.length === 0) return // 判断空
        console.log(this.keyword)
      }, 1000)
    }
  }
}
</script>

样式：

<style scoped lang="less">
.search-header {
    height: 46px;
    display: flex;
    align-items: center;
    background-color: #007bff;
    overflow: hidden;

    /*后退按钮*/
    .goback {
        padding-left: 14px;
    }

    /*搜索组件*/
    .van-search {
        flex: 1;
    }
}
</style>

你负责抄我的，我负责抄别人的，合作愉快！！！