vue实现搜索组件

Vue 实现搜索组件的方法

基础搜索组件实现

创建一个简单的搜索输入框，绑定数据并使用v-model实现双向绑定：

<template>
  <div class="search-box">
    <input 
      type="text" 
      v-model="searchQuery" 
      placeholder="搜索..."
      @input="handleSearch"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch() {
      this.$emit('search', this.searchQuery)
    }
  }
}
</script>

添加防抖优化

为防止频繁触发搜索，使用lodash.debounce实现防抖：

import debounce from 'lodash.debounce'

export default {
  methods: {
    handleSearch: debounce(function() {
      this.$emit('search', this.searchQuery)
    }, 300)
  }
}

搜索结果显示

结合列表组件显示搜索结果：

<template>
  <div>
    <search-component @search="performSearch"/>
    <ul v-if="results.length">
      <li v-for="item in results" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <p v-else>没有找到结果</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      results: []
    }
  },
  methods: {
    performSearch(query) {
      // 调用API或过滤本地数据
      this.results = this.items.filter(item => 
        item.name.toLowerCase().includes(query.toLowerCase())
      )
    }
  }
}
</script>

高级搜索功能

实现多条件搜索：

<template>
  <div class="advanced-search">
    <input v-model="filters.name" placeholder="名称"/>
    <select v-model="filters.category">
      <option value="">所有分类</option>
      <option v-for="cat in categories" :value="cat">{{cat}}</option>
    </select>
    <button @click="search">搜索</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filters: {
        name: '',
        category: ''
      },
      categories: ['电子产品', '服装', '食品']
    }
  },
  methods: {
    search() {
      this.$emit('search', {...this.filters})
    }
  }
}
</script>

使用Vuex管理搜索状态

对于大型应用，可以使用Vuex集中管理搜索状态：

// store/modules/search.js
const state = {
  query: '',
  results: []
}

const mutations = {
  SET_QUERY(state, query) {
    state.query = query
  },
  SET_RESULTS(state, results) {
    state.results = results
  }
}

const actions = {
  async search({commit}, query) {
    commit('SET_QUERY', query)
    const res = await api.search(query)
    commit('SET_RESULTS', res.data)
  }
}

样式优化

添加基本样式增强用户体验：

.search-box {
  position: relative;
  margin: 20px 0;
}

.search-box input {
  padding: 8px 15px;
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.search-box input:focus {
  outline: none;
  border-color: #42b983;
}

这些方法涵盖了从基础到高级的Vue搜索组件实现，可以根据项目需求选择合适的方案或组合使用。