vue滑动评分实现

Vue 滑动评分实现

使用原生 HTML5 range 输入

在 Vue 中可以通过 <input type="range"> 快速实现滑动评分功能。这种方法不需要额外依赖库，适合简单场景。

<template>
  <div>
    <input 
      type="range" 
      min="0" 
      max="5" 
      step="0.5" 
      v-model="rating"
      @input="updateRating"
    >
    <p>当前评分: {{ rating }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 0
    }
  },
  methods: {
    updateRating() {
      console.log('评分更新:', this.rating);
    }
  }
}
</script>

使用第三方库 vue-star-rating

对于更丰富的评分功能，可以使用专门为 Vue 设计的评分组件库。

安装 vue-star-rating:

npm install vue-star-rating

实现代码:

<template>
  <div>
    <star-rating 
      v-model:rating="rating"
      :increment="0.5"
      :max-rating="5"
      :star-size="30"
      @update:rating="updateRating"
    />
  </div>
</template>

<script>
import StarRating from 'vue-star-rating';

export default {
  components: {
    StarRating
  },
  data() {
    return {
      rating: 0
    }
  },
  methods: {
    updateRating(rating) {
      console.log('新评分:', rating);
    }
  }
}
</script>

自定义滑动评分组件

如果需要完全自定义样式和行为，可以创建自己的评分组件。

<template>
  <div class="custom-rating">
    <div 
      class="rating-bar"
      @mousemove="handleMouseMove"
      @click="setRating"
      ref="ratingBar"
    >
      <div class="rating-fill" :style="{ width: fillWidth }"></div>
    </div>
    <div class="rating-value">{{ displayRating }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 0,
      maxRating: 5,
      isDragging: false
    }
  },
  computed: {
    fillWidth() {
      return `${(this.rating / this.maxRating) * 100}%`;
    },
    displayRating() {
      return this.rating.toFixed(1);
    }
  },
  methods: {
    handleMouseMove(e) {
      if (!this.isDragging) return;
      this.calculateRating(e);
    },
    setRating(e) {
      this.calculateRating(e);
    },
    calculateRating(e) {
      const bar = this.$refs.ratingBar;
      const rect = bar.getBoundingClientRect();
      const position = e.clientX - rect.left;
      const percentage = Math.min(Math.max(position / rect.width, 0), 1);
      this.rating = percentage * this.maxRating;
      this.$emit('update:rating', this.rating);
    }
  },
  mounted() {
    document.addEventListener('mousedown', () => {
      this.isDragging = true;
    });
    document.addEventListener('mouseup', () => {
      this.isDragging = false;
    });
  }
}
</script>

<style>
.custom-rating {
  width: 200px;
}
.rating-bar {
  height: 20px;
  background: #eee;
  position: relative;
  cursor: pointer;
}
.rating-fill {
  height: 100%;
  background: #ffcc00;
}
.rating-value {
  text-align: center;
  margin-top: 5px;
}
</style>

使用 Vuetify 的滑块组件

如果项目中使用 Vuetify，可以利用其内置的滑块组件实现评分功能。

<template>
  <v-slider
    v-model="rating"
    :max="5"
    :step="0.5"
    thumb-label
    ticks
  >
    <template v-slot:thumb-label="{ value }">
      {{ value.toFixed(1) }}
    </template>
  </v-slider>
</template>

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

每种方法适用于不同场景，原生HTML5方案最简单，第三方库提供更多功能，自定义组件灵活性最高，Vuetify方案适合使用该UI框架的项目。根据项目需求选择最合适的实现方式。