vue 实现边输入边搜索功能

最新推荐文章于 2024-07-24 10:48:36 发布

zhooson

最新推荐文章于 2024-07-24 10:48:36 发布

阅读量1.6w

点赞数 7

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/Zhooson/article/details/78933252

版权

vue 专栏收录该内容

67 篇文章 1 订阅

订阅专栏

效果图：
这里写图片描述

搜索分类2种情况，一般的是当用户输入完，点击确定的按钮在向后发送请求，还有一种就是的我一边输入，一边向后台发送请求，但是会产生一个性能的问题，就是一直发请求造成页面的卡顿，这里就是使用截流函数,当用户每次点击键盘之间超过300ms就发送请求，否则不请求

search.vue

<template>
  <div id="search">
    <input type="text" class="search" placeholder="搜索" v-model.trim="title" />
  </div>
</template>

js:

<script>
// 节流函数
const delay = (function() {
  let timer = 0;
  return function(callback, ms) {
    clearTimeout(timer);
    timer = setTimeout(callback, ms);
  };
})();
export default {
  name: 'search',
  data() {
    return {
      title: '',
      search:[]
    };
  },
  watch: {
  //watch title change
    title() {
      delay(() => {
        this.fetchData();
      }, 300);
    },
  },
  methods: {
    async fetchData(val) {
      const res = await this.fetch({
        url: '写上你的URL',
        method: 'GET',
        params: { title: this.title },
      });
      this.search = res.data.list;
    },
  },
  mounted() {},
};
</script>