vue实现导航栏搜索

实现导航栏搜索功能

在Vue中实现导航栏搜索功能可以通过以下步骤完成，结合Vue的数据绑定和事件处理机制。

创建搜索组件

在导航栏组件中添加一个搜索框，使用v-model进行双向数据绑定。

<template>
  <div class="navbar">
    <input 
      type="text" 
      v-model="searchQuery" 
      placeholder="搜索..."
      @keyup.enter="handleSearch"
    />
    <button @click="handleSearch">搜索</button>
  </div>
</template>

处理搜索逻辑

在Vue组件中定义数据和方法来处理搜索逻辑。

<script>
export default {
  data() {
    return {
      searchQuery: ''
    }
  },
  methods: {
    handleSearch() {
      if (this.searchQuery.trim()) {
        this.$emit('search', this.searchQuery)
        // 或者调用API进行搜索
        // this.searchItems(this.searchQuery)
      }
    }
  }
}
</script>

样式设计

为搜索框添加基本样式，确保其与导航栏协调。

<style scoped>
.navbar {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #f5f5f5;
}

input {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-right: 8px;
}

button {
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>

与父组件通信

如果搜索功能需要在父组件中处理，可以通过自定义事件将搜索词传递给父组件。

// 父组件中使用
<template>
  <Navbar @search="onSearch" />
</template>

<script>
import Navbar from './Navbar.vue'

export default {
  components: { Navbar },
  methods: {
    onSearch(query) {
      console.log('搜索词:', query)
      // 执行搜索逻辑
    }
  }
}
</script>

使用Vuex管理状态

对于更复杂的应用，可以使用Vuex来管理搜索状态。

// store.js
export default new Vuex.Store({
  state: {
    searchQuery: ''
  },
  mutations: {
    setSearchQuery(state, query) {
      state.searchQuery = query
    }
  },
  actions: {
    search({ commit }, query) {
      commit('setSearchQuery', query)
      // 执行搜索API调用等
    }
  }
})

组件中使用Vuex

在组件中通过mapActions或直接调用$store来触发搜索。

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions(['search']),
    handleSearch() {
      if (this.searchQuery.trim()) {
        this.search(this.searchQuery)
      }
    }
  }
}
</script>

实现搜索建议

对于更完善的搜索体验，可以添加搜索建议功能。

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

<script>
export default {
  data() {
    return {
      searchQuery: '',
      suggestions: []
    }
  },
  methods: {
    fetchSuggestions() {
      // 调用API获取搜索建议
      // 示例伪代码
      if (this.searchQuery.length > 2) {
        api.getSuggestions(this.searchQuery).then(res => {
          this.suggestions = res.data
        })
      }
    },
    selectSuggestion(item) {
      this.searchQuery = item
      this.suggestions = []
      this.handleSearch()
    }
  }
}
</script>