vue实现价格区间

Vue 实现价格区间选择功能

在 Vue 中实现价格区间选择功能，可以通过使用滑块组件或手动输入框来实现。以下是几种常见的方法：

使用滑块组件实现价格区间

安装 vue-slider-component 库：

npm install vue-slider-component --save

在组件中使用：

<template>
  <div>
    <vue-slider
      v-model="value"
      :min="0"
      :max="1000"
      :interval="10"
      tooltip="always"
    />
    <div>价格区间：{{ value[0] }} - {{ value[1] }}</div>
  </div>
</template>

<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

export default {
  components: {
    VueSlider,
  },
  data() {
    return {
      value: [100, 500],
    }
  },
}
</script>

使用输入框实现价格区间

<template>
  <div>
    <input type="number" v-model="minPrice" placeholder="最低价" />
    <input type="number" v-model="maxPrice" placeholder="最高价" />
    <button @click="handleSubmit">确定</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      minPrice: 0,
      maxPrice: 1000,
    }
  },
  methods: {
    handleSubmit() {
      if (this.minPrice > this.maxPrice) {
        alert('最低价不能大于最高价')
        return
      }
      this.$emit('price-change', [this.minPrice, this.maxPrice])
    },
  },
}
</script>

使用 Element UI 的滑块组件

如果项目中使用 Element UI，可以直接使用其提供的滑块组件：

<template>
  <div>
    <el-slider
      v-model="value"
      range
      :min="0"
      :max="1000"
    />
    <div>价格区间：{{ value[0] }} - {{ value[1] }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: [100, 500],
    }
  },
}
</script>

实现价格区间筛选功能

结合上述组件，可以进一步实现价格筛选功能：

<template>
  <div>
    <vue-slider
      v-model="priceRange"
      :min="0"
      :max="1000"
      :interval="10"
      tooltip="always"
    />
    <div>价格区间：{{ priceRange[0] }} - {{ priceRange[1] }}</div>
    <button @click="filterProducts">筛选</button>
  </div>
</template>

<script>
import VueSlider from 'vue-slider-component'
import 'vue-slider-component/theme/default.css'

export default {
  components: {
    VueSlider,
  },
  data() {
    return {
      priceRange: [100, 500],
      products: [
        { id: 1, name: '商品A', price: 200 },
        { id: 2, name: '商品B', price: 400 },
        { id: 3, name: '商品C', price: 600 },
      ],
      filteredProducts: [],
    }
  },
  methods: {
    filterProducts() {
      this.filteredProducts = this.products.filter(
        (product) =>
          product.price >= this.priceRange[0] &&
          product.price <= this.priceRange[1]
      )
    },
  },
}
</script>

这些方法可以根据项目需求选择适合的实现方式，滑块组件适合直观展示价格区间，而输入框则适合精确输入。