vue实现评分效果

Vue 实现评分效果的方法

在 Vue 中实现评分效果可以通过多种方式完成，常见的有基于组件库或自定义实现。以下是几种常见的方法：

使用第三方组件库（如 Element UI）

Element UI 提供了现成的评分组件，可以快速实现评分功能。

安装 Element UI：

npm install element-ui

在 Vue 项目中引入并使用：

<template>
  <el-rate v-model="rating" :colors="colors" :max="5"></el-rate>
</template>

<script>
export default {
  data() {
    return {
      rating: 3,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900']
    };
  }
};
</script>

自定义评分组件

如果需要完全自定义评分效果，可以通过 Vue 实现一个简单的评分组件。

<template>
  <div class="star-rating">
    <span 
      v-for="star in maxStars" 
      :key="star" 
      @click="setRating(star)"
      @mouseover="hoverRating(star)"
      @mouseleave="resetRating"
      :class="{ 'active': star <= currentRating }"
    >
      ★
    </span>
  </div>
</template>

<script>
export default {
  props: {
    maxStars: {
      type: Number,
      default: 5
    },
    initialRating: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentRating: this.initialRating,
      hoverRating: 0
    };
  },
  methods: {
    setRating(star) {
      this.currentRating = star;
      this.$emit('rating-selected', star);
    },
    hoverRating(star) {
      this.hoverRating = star;
    },
    resetRating() {
      this.hoverRating = 0;
    }
  }
};
</script>

<style>
.star-rating span {
  font-size: 24px;
  color: #ccc;
  cursor: pointer;
}
.star-rating span.active {
  color: gold;
}
</style>

使用 SVG 实现更灵活的评分

如果需要更灵活的样式（如半星评分），可以通过 SVG 实现。

<template>
  <div class="star-rating">
    <svg 
      v-for="star in maxStars" 
      :key="star" 
      @click="setRating(star)"
      @mouseover="hoverRating(star)"
      @mouseleave="resetRating"
      :width="starSize" 
      :height="starSize" 
      :viewBox="`0 0 ${starSize} ${starSize}`"
    >
      <polygon 
        :points="getStarPoints(starSize/2, starSize/2, starSize/2, 5)"
        :fill="star <= currentRating ? 'gold' : '#ccc'"
      />
    </svg>
  </div>
</template>

<script>
export default {
  props: {
    maxStars: {
      type: Number,
      default: 5
    },
    initialRating: {
      type: Number,
      default: 0
    },
    starSize: {
      type: Number,
      default: 24
    }
  },
  data() {
    return {
      currentRating: this.initialRating,
      hoverRating: 0
    };
  },
  methods: {
    getStarPoints(cx, cy, r, points) {
      const angle = Math.PI / points;
      let coords = '';
      for (let i = 0; i < 2 * points; i++) {
        const currAngle = i * angle - Math.PI / 2;
        const r2 = i % 2 === 0 ? r : r / 2;
        coords += (cx + r2 * Math.cos(currAngle)) + ',' + (cy + r2 * Math.sin(currAngle)) + ' ';
      }
      return coords.trim();
    },
    setRating(star) {
      this.currentRating = star;
      this.$emit('rating-selected', star);
    },
    hoverRating(star) {
      this.hoverRating = star;
    },
    resetRating() {
      this.hoverRating = 0;
    }
  }
};
</script>

实现半星评分

如果需要支持半星评分，可以通过计算鼠标位置实现更精细的评分。

<template>
  <div class="star-rating" @mouseleave="resetRating">
    <div 
      v-for="star in maxStars" 
      :key="star" 
      class="star-container"
      @mousemove="updatePartialRating(star, $event)"
      @click="setRating(partialRating)"
    >
      <div class="star-background">★</div>
      <div 
        class="star-foreground" 
        :style="{ width: `${getPartialWidth(star)}%` }"
      >★</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    maxStars: {
      type: Number,
      default: 5
    },
    initialRating: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentRating: this.initialRating,
      partialRating: 0,
      hoverRating: 0
    };
  },
  methods: {
    updatePartialRating(star, event) {
      const rect = event.target.getBoundingClientRect();
      const percentage = (event.clientX - rect.left) / rect.width;
      this.partialRating = star - 1 + percentage;
    },
    setRating(rating) {
      this.currentRating = rating;
      this.$emit('rating-selected', rating);
    },
    resetRating() {
      this.partialRating = this.currentRating;
    },
    getPartialWidth(star) {
      if (this.partialRating >= star) return 100;
      if (this.partialRating >= star - 1) return (this.partialRating - (star - 1)) * 100;
      return 0;
    }
  }
};
</script>

<style>
.star-rating {
  display: flex;
}
.star-container {
  position: relative;
  font-size: 24px;
  cursor: pointer;
}
.star-background {
  color: #ccc;
}
.star-foreground {
  position: absolute;
  top: 0;
  left: 0;
  color: gold;
  overflow: hidden;
  white-space: nowrap;
}
</style>

以上方法可以根据需求选择，从简单的组件库集成到完全自定义的实现都能满足不同场景的需求。