vue商城中商品“筛选器”功能的实现代码

要在Vue商城中实现商品筛选器功能，需要先创建一个组件来处理筛选逻辑。该组件可以选择使用Vue的计算属性来处理筛选逻辑。

以下是实现商品筛选器功能的完整攻略：

1. 创建筛选器组件

首先，我们需要创建一个筛选器组件。该组件应该包含以下元素：

• input文本框，用于输入筛选关键字
• 下拉菜单，用于显示可用的筛选选项
• 筛选按钮，用于触发筛选操作

在组件中，我们需要使用props接收父组件中的商品列表，并将筛选结果通过事件emit到父组件中。

示例代码如下：

<template>
  <div>
    <input v-model="keyword" placeholder="请输入筛选关键字">
    <select v-model="selectedOption">
      <option value="">请选择筛选选项</option>
      <option v-for="option in options" :value="option.value">{{ option.label }}</option>
    </select>
    <button @click="filterProducts()">筛选</button>
  </div>
</template>

<script>
export default {
  props: {
    products: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      keyword: '',
      selectedOption: '',
      options: [
        {label: '按价格排序', value: 'price'},
        {label: '按销量排序', value: 'sales'},
        {label: '按评分排序', value: 'rating'}
      ]
    }
  },
  methods: {
    filterProducts() {
      const filteredProducts = this.products.filter(product => {
        const keywordMatch = product.name.toLowerCase().includes(this.keyword.toLowerCase())
        const optionMatch = this.selectedOption ? product[this.selectedOption] : true
        return keywordMatch && optionMatch
      })
      this.$emit('filter-products', filteredProducts)
    }
  }
}
</script>

2. 在父组件中使用筛选器组件

在父组件中，我们需要使用筛选器组件，并将商品列表通过props传递给筛选器组件。

当筛选器组件触发筛选操作时，父组件应该接收到筛选结果，然后通过更新数据来重新渲染商品列表。

示例代码如下：

<template>
  <div>
    <ProductFilter :products="products" @filterProducts="updateFilteredProducts"></ProductFilter>
    <ProductList :products="filteredProducts"></ProductList>
  </div>
</template>

<script>
import ProductFilter from './ProductFilter.vue'
import ProductList from './ProductList.vue'

export default {
  components: {
    ProductFilter,
    ProductList
  },
  data() {
    return {
      products: [
        { name: 'iPhone X', price: 999, sales: 500, rating: 4.5 },
        { name: 'Samsung Galaxy S10', price: 899, sales: 800, rating: 4.2 },
        { name: 'Google Pixel 3', price: 799, sales: 300, rating: 4.8 },
        { name: 'Huawei P30 Pro', price: 899, sales: 400, rating: 4.4 }
      ],
      filteredProducts: []
    }
  },
  methods: {
    updateFilteredProducts(filteredProducts) {
      this.filteredProducts = filteredProducts
    }
  }
}
</script>

在上面的代码示例中，我们创建了一个父组件，它包含两个子组件：筛选器组件和商品列表组件。父组件中的数据products包含了所有的产品列表，同时还有一个filteredProducts数组，用于存放筛选后的商品列表展示给用户。

筛选器组件和商品列表组件都通过props接收父组件中传递的数据。当筛选器组件触发筛选操作时，父组件调用方法updateFilteredProducts更新filteredProducts数组，并且将其传递给商品列表组件以展示给用户。

3. 示例说明

示例一：按关键字筛选

当用户在筛选器组件的input框中输入关键字时，可以通过该关键字对商品进行筛选。

示例代码如下：

<template>
  <div>
    <input v-model="keyword" placeholder="请输入筛选关键字">
    <button @click="filterProducts()">筛选</button>
  </div>
</template>

<script>
export default {
  props: {
    products: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    filterProducts() {
      const filteredProducts = this.products.filter(product => {
        const keywordMatch = product.name.toLowerCase().includes(this.keyword.toLowerCase())
        return keywordMatch
      })
      this.$emit('filter-products', filteredProducts)
    }
  }
}
</script>

在上面的代码示例中，我们只有输入框和筛选按钮。当用户输入关键字并点击筛选按钮时，我们会从商品列表中筛选出那些商品名称包含该关键字的商品，并将其作为筛选结果emit给父组件。

示例二：按价格排序

当用户选择按价格排序选项时，我们需要对商品列表按照价格属性进行排序，并按照顺序展示给用户。

示例代码如下：

<template>
  <div>
    <select v-model="selectedOption">
      <option value="">请选择筛选选项</option>
      <option value="price">按价格排序</option>
    </select>
    <button @click="filterProducts()">筛选</button>
  </div>
</template>

<script>
export default {
  props: {
    products: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      selectedOption: 'price'
    }
  },
  methods: {
    filterProducts() {
      const filteredProducts = this.products.slice().sort((a, b) => {
        return this.selectedOption === 'price' ? a.price - b.price : false
      })
      this.$emit('filter-products', filteredProducts)
    }
  }
}
</script>

在上面的代码示例中，我们添加了一个下拉菜单，用于选择按价格排序。筛选按钮被点击后，我们按照所选项对商品进行排序，并将排序后的结果作为筛选结果emit给父组件。

值得注意的是，我们通过slice()方法进行浅拷贝，以禁止对原数组进行修改。同时，在比较函数中如果所选选项不是按价格排序，则直接返回false，这样就可以避免对商品进行错误的排序。