vue项目笔记（18）-搜索组件逻辑处理及代码优化

最新推荐文章于 2024-07-21 09:04:51 发布

CHH5431

最新推荐文章于 2024-07-21 09:04:51 发布

阅读量950

点赞数

分类专栏： Vue 文章标签：搜索组件代码优化

本文链接：https://blog.csdn.net/qq_41115965/article/details/81702905

版权

Vue 专栏收录该内容

76 篇文章 8 订阅

订阅专栏

本文介绍了在Vue项目中处理搜索组件的逻辑过程，包括输入框的双向绑定、从父组件接收数据、创建新数组、监听keyword变化并进行延迟优化。同时提到在数据量大时使用better-scroll实现滚动效果，以及如何处理搜索结果为空的情况，强调避免在HTML中使用逻辑代码，推荐使用computed计算属性。

摘要由CSDN通过智能技术生成

搜索组件逻辑处理及代码优化

在我遇到的项目中，对于对于搜索组件，部分是后台直接写好的接口，直接调用既可以完成搜索；另一种就是由前端完成搜索逻辑处理，如下：

1、首先，对输入框进行双向绑定（v-model=‘keyword’）；

代码如下：

<template>
  <div>
    <div class="search">
      <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音">
    </div>
    <div class="search-content" ref="search" v-show="keyword">
      <ul>
        <li class="search-item border-bottom" v-for="item of list" :key="item.id">
          {{item.name}}
        </li>
        <li class="search-item border-bottom" v-show="hasNoData">
          没有招到匹配数据
        </li>
      </ul>
    </div>
  </div>
</template>

2、搜索的数据来源是有父组件City请求的数据cities，所以要从父组件传值过来。

3、定义给新数组list

4、监听函数（watch），监听keyword的变化

5、优化：为了减少函数执行的频率，使用延时计时器进行优化。

6、在搜索到的数据足够多的时候，我们可以使用better-scroll实现滚动效果。当搜索不到结果的时候，我们使用v-show控制显示效果。另外，删除搜索字符时，我们通过把list置空，来取消之前搜索的结果。

7、注意：我们尽量在html中不要使用逻辑代码，可以利用computed计算属性来代替。

代码如下：

<script>
  import Bscroll from 'better-scroll'
  export default{
    name: 'CitySearch',
    props: {
      cities: Object
    },
    mounted(){
      this.scroll = new Bscroll(this.$refs.search);
    },
    data(){
      return {
        keyword: '',
        list: [],
        timer: null
      }
    },
    computed: {
      hasNoData(){
        return !this.list.length;
      }
    },
    watch: {
      keyword(){
        console.log('111');
        if (this.timer) {
          clearTimeout(this.timer)
        }
        if (!this.keyword) {
          this.list = [];
          return;
        }
        this.timer = setTimeout(() => {
          const result = [];
          for (let i in this.cities) {
            this.cities[i].forEach((value) => {
              if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
                result.push(value);
              }
            })
          }
          this.list = result;
        }, 100);
      }
    }
  }
</script>