有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

Vue input搜索框防抖 Vant组件

vue cat 3个月前 (06-21) 51次浏览 已收录 0个评论 扫描二维码

结构:

<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>

你负责抄我的,我负责抄别人的,合作愉快!!!

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址