当前位置：首页 > VUE

vue 实现评分

2026-01-07 23:08:26VUE

Vue 实现评分功能

在 Vue 中实现评分功能可以通过多种方式完成，包括使用第三方组件库或自定义实现。以下是两种常见的方法：

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

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

安装 Element UI：

npm install element-ui

在 Vue 项目中引入并使用：

<template>
  <div>
    <el-rate v-model="rating" :colors="colors"></el-rate>
    <p>当前评分：{{ rating }}</p>
  </div>
</template>

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

el-rate 提供了丰富的配置选项，如：

v-model：绑定评分值。
colors：自定义评分图标的颜色。
disabled：禁用评分。
show-text：显示辅助文字。

自定义评分组件

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

<template>
  <div>
    <div class="rating">
      <span 
        v-for="star in 5" 
        :key="star" 
        @click="setRating(star)"
        :class="{ 'active': star <= currentRating }"
      >
        ★
      </span>
    </div>
    <p>当前评分：{{ currentRating }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRating: 0
    };
  },
  methods: {
    setRating(star) {
      this.currentRating = star;
    }
  }
};
</script>

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

实现半星评分

如果需要支持半星评分，可以进一步扩展自定义组件：

<template>
  <div>
    <div class="rating">
      <span 
        v-for="star in 5" 
        :key="star" 
        @click="setRating(star)"
        @mousemove="hoverRating = star"
        @mouseleave="hoverRating = 0"
      >
        <span 
          v-if="star <= currentRating || star <= hoverRating"
          class="full-star"
        >
          ★
        </span>
        <span 
          v-else-if="star - 0.5 <= currentRating || star - 0.5 <= hoverRating"
          class="half-star"
        >
          ★
        </span>
        <span v-else class="empty-star">
          ★
        </span>
      </span>
    </div>
    <p>当前评分：{{ currentRating }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentRating: 0,
      hoverRating: 0
    };
  },
  methods: {
    setRating(star) {
      this.currentRating = star;
    }
  }
};
</script>

<style>
.rating span {
  font-size: 24px;
  cursor: pointer;
  position: relative;
}
.full-star {
  color: gold;
}
.half-star {
  color: gold;
  opacity: 0.5;
}
.empty-star {
  color: #ccc;
}
</style>

动态绑定评分数据

如果需要将评分数据绑定到父组件或后端，可以通过 props 和 $emit 实现双向绑定：

<template>
  <div>
    <div class="rating">
      <span 
        v-for="star in 5" 
        :key="star" 
        @click="setRating(star)"
        :class="{ 'active': star <= value }"
      >
        ★
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: Number,
      default: 0
    }
  },
  methods: {
    setRating(star) {
      this.$emit('input', star);
    }
  }
};
</script>

在父组件中使用：

<template>
  <div>
    <rating-component v-model="rating"></rating-component>
    <p>当前评分：{{ rating }}</p>
  </div>
</template>

<script>
import RatingComponent from './RatingComponent.vue';

export default {
  components: {
    RatingComponent
  },
  data() {
    return {
      rating: 0
    };
  }
};
</script>

通过以上方法，可以根据需求选择适合的方式实现 Vue 评分功能。

vue 实现评分