vue实现搜索栏目

实现搜索栏的基本结构

在Vue中实现搜索栏，通常需要结合v-model进行数据双向绑定，监听用户输入并触发搜索逻辑。以下是一个基础模板：

<template>
  <div class="search-bar">
    <input 
      type="text" 
      v-model="searchQuery" 
      placeholder="输入关键词搜索"
      @keyup.enter="handleSearch"
    />
    <button @click="handleSearch">搜索</button>
  </div>
</template>

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

<style scoped>
.search-bar {
  display: flex;
  gap: 8px;
}
input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>

实现防抖优化

高频输入场景下，可以通过防抖（debounce）减少不必要的搜索请求：

import { debounce } from 'lodash';

export default {
  data() {
    return {
      searchQuery: '',
      debouncedSearch: null
    }
  },
  created() {
    this.debouncedSearch = debounce(this.emitSearch, 500);
  },
  methods: {
    emitSearch() {
      this.$emit('search', this.searchQuery);
    },
    handleSearch() {
      this.debouncedSearch();
    }
  }
}

结合后端API搜索

实际项目中通常需要调用API获取搜索结果：

methods: {
  async handleSearch() {
    try {
      const response = await axios.get('/api/search', {
        params: { q: this.searchQuery }
      });
      this.$emit('results', response.data);
    } catch (error) {
      console.error('搜索失败:', error);
    }
  }
}

添加搜索建议

实现输入时的自动补全建议功能：

<template>
  <div class="search-container">
    <input 
      v-model="searchQuery" 
      @input="fetchSuggestions"
    />
    <ul v-if="suggestions.length" class="suggestions">
      <li 
        v-for="item in suggestions" 
        @click="selectSuggestion(item)"
      >
        {{ item }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      suggestions: []
    }
  },
  methods: {
    async fetchSuggestions() {
      if (this.searchQuery.length > 2) {
        const res = await axios.get('/api/suggest', {
          params: { q: this.searchQuery }
        });
        this.suggestions = res.data;
      }
    },
    selectSuggestion(item) {
      this.searchQuery = item;
      this.suggestions = [];
      this.handleSearch();
    }
  }
}
</script>

集成Vuex状态管理

大型项目建议使用Vuex集中管理搜索状态：

// store/modules/search.js
export default {
  state: {
    query: '',
    results: []
  },
  mutations: {
    SET_QUERY(state, payload) {
      state.query = payload;
    },
    SET_RESULTS(state, payload) {
      state.results = payload;
    }
  },
  actions: {
    async search({ commit }, query) {
      commit('SET_QUERY', query);
      const res = await api.search(query);
      commit('SET_RESULTS', res.data);
    }
  }
}

组件中调用：

methods: {
  handleSearch() {
    this.$store.dispatch('search/search', this.searchQuery);
  }
},
computed: {
  results() {
    return this.$store.state.search.results;
  }
}

样式增强示例

添加更美观的搜索栏样式：

.search-bar {
  position: relative;
  max-width: 500px;
  margin: 0 auto;
}
input {
  width: 100%;
  padding: 12px 20px;
  border: 2px solid #ddd;
  border-radius: 30px;
  outline: none;
  transition: all 0.3s;
}
input:focus {
  border-color: #4285f4;
}
button {
  position: absolute;
  right: 5px;
  top: 5px;
  background: #4285f4;
  color: white;
  border: none;
  border-radius: 25px;
  padding: 7px 15px;
  cursor: pointer;
}