vue滑动评分实现

Vue 滑动评分实现方法

使用第三方库（如vue-rate）

安装依赖：

npm install vue-rate --save

在组件中使用：

<template>
  <vue-rate v-model="rating" :length="5" :size="30" active-color="#FFD700"/>
</template>

<script>
import VueRate from 'vue-rate';
export default {
  components: { VueRate },
  data() {
    return {
      rating: 3
    }
  }
}
</script>

自定义滑动评分组件

创建可拖动滑块组件：

<template>
  <div class="rating-container">
    <div class="rating-track" ref="track" @click="handleClick">
      <div class="rating-thumb" 
           :style="{ left: thumbPosition + 'px' }"
           @mousedown="startDrag"
           @touchstart="startDrag">
      </div>
    </div>
    <div class="rating-value">{{ currentRating.toFixed(1) }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRating: 0,
      isDragging: false,
      maxRating: 5,
      trackWidth: 200
    }
  },
  computed: {
    thumbPosition() {
      return (this.currentRating / this.maxRating) * this.trackWidth
    }
  },
  methods: {
    handleClick(e) {
      const rect = this.$refs.track.getBoundingClientRect()
      this.currentRating = Math.min(
        this.maxRating, 
        Math.max(0, (e.clientX - rect.left) / rect.width * this.maxRating)
      )
      this.$emit('input', this.currentRating)
    },
    startDrag() {
      this.isDragging = true
      document.addEventListener('mousemove', this.handleDrag)
      document.addEventListener('touchmove', this.handleDrag)
      document.addEventListener('mouseup', this.stopDrag)
      document.addEventListener('touchend', this.stopDrag)
    },
    handleDrag(e) {
      if (!this.isDragging) return
      const clientX = e.clientX || e.touches[0].clientX
      this.handleClick({ clientX })
    },
    stopDrag() {
      this.isDragging = false
      document.removeEventListener('mousemove', this.handleDrag)
      document.removeEventListener('touchmove', this.handleDrag)
    }
  }
}
</script>

<style>
.rating-container {
  width: 220px;
}
.rating-track {
  width: 200px;
  height: 10px;
  background: #ddd;
  position: relative;
  border-radius: 5px;
  cursor: pointer;
}
.rating-thumb {
  width: 20px;
  height: 20px;
  background: #42b983;
  border-radius: 50%;
  position: absolute;
  top: -5px;
  transform: translateX(-50%);
  cursor: grab;
}
.rating-value {
  text-align: center;
  margin-top: 10px;
  font-size: 18px;
}
</style>

使用range input实现

简单HTML5 range输入实现：

<template>
  <div class="range-rating">
    <input 
      type="range" 
      min="0" 
      max="5" 
      step="0.1" 
      v-model="rating"
      @input="updateRating"
      class="rating-slider">
    <span>{{ rating }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 0
    }
  },
  methods: {
    updateRating() {
      this.$emit('rating-changed', parseFloat(this.rating))
    }
  }
}
</script>

<style>
.rating-slider {
  width: 200px;
  -webkit-appearance: none;
  height: 10px;
  background: #ddd;
  outline: none;
  opacity: 0.7;
  transition: opacity .2s;
}
.rating-slider:hover {
  opacity: 1;
}
.rating-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  background: #4CAF50;
  cursor: pointer;
  border-radius: 50%;
}
</style>

使用Vuetify组件

如果使用Vuetify框架：

<template>
  <v-slider
    v-model="rating"
    :max="5"
    :step="0.5"
    thumb-label
    ticks
  ></v-slider>
</template>

<script>
export default {
  data() {
    return {
      rating: 0
    }
  }
}
</script>

每种方法适用于不同场景，第三方库方案最快速但定制性有限，自定义组件灵活性最高但需要更多开发时间，range input方案最简单但样式受限，Vuetify等UI框架方案适合已使用该框架的项目。