当前位置：首页 > VUE

vue实现商城搜索

2026-03-08 12:19:39VUE

Vue 实现商城搜索功能

搜索框组件设计

使用 Vue 的 v-model 实现双向数据绑定，监听用户输入。建议添加防抖处理（如 Lodash 的 _.debounce）避免频繁触发搜索。

<template>
  <div class="search-box">
    <input 
      v-model="keyword" 
      @keyup.enter="search" 
      placeholder="输入商品名称/品牌"
    />
    <button @click="search">搜索</button>
  </div>
</template>

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

搜索逻辑实现

通过 Vuex 或组件通信管理搜索状态，建议将搜索关键词作为路由参数实现可分享的 URL。

vue实现商城搜索

// 在页面组件中
methods: {
  handleSearch(keyword) {
    if (!keyword) return

    // 方式1：通过路由更新（推荐）
    this.$router.push({
      path: '/products',
      query: { q: keyword }
    })

    // 方式2：直接调用API
    this.fetchProducts({ keyword })
  },
  fetchProducts(params) {
    api.getProducts(params).then(res => {
      this.products = res.data.list
    })
  }
}

搜索结果展示

使用 v-for 渲染商品列表，建议添加加载状态和空状态提示。

vue实现商城搜索

<template>
  <div class="product-list">
    <div v-if="loading" class="loading">加载中...</div>
    <div v-else-if="!products.length" class="empty">暂无商品</div>
    <div v-else class="grid">
      <product-card 
        v-for="item in products" 
        :key="item.id" 
        :data="item"
      />
    </div>
  </div>
</template>

搜索建议功能

实现输入时的自动补全建议，需要与后端配合返回建议关键词。

watch: {
  keyword(newVal) {
    if (newVal) {
      this.fetchSuggestions(newVal)
    }
  }
},
methods: {
  fetchSuggestions: _.debounce(function(keyword) {
    api.getSuggestions(keyword).then(res => {
      this.suggestions = res.data
    })
  }, 300)
}

高级搜索筛选

添加价格区间、分类等筛选条件，使用对象管理筛选参数。

<div class="filters">
  <select v-model="filters.category">
    <option value="">全部分类</option>
    <option v-for="cat in categories" :value="cat.id">{{ cat.name }}</option>
  </select>
  <input v-model.number="filters.minPrice" placeholder="最低价">
  <input v-model.number="filters.maxPrice" placeholder="最高价">
</div>

性能优化建议

使用虚拟滚动（如 vue-virtual-scroller）处理大量商品列表
实现前端缓存已搜索过的结果
对图片使用懒加载（如 v-lazy）
分页加载（无限滚动或页码切换）

// 分页示例
data() {
  return {
    page: 1,
    pageSize: 20,
    hasMore: true
  }
},
methods: {
  loadMore() {
    if (!this.hasMore) return
    this.page++
    this.fetchProducts()
  },
  fetchProducts() {
    api.getProducts({
      keyword: this.keyword,
      page: this.page,
      pageSize: this.pageSize
    }).then(res => {
      this.products.push(...res.data.list)
      this.hasMore = res.data.hasMore
    })
  }
}