当前位置：首页 > VUE

vue实现评价

2026-01-13 07:48:46VUE

vue实现评价功能

在Vue中实现评价功能通常涉及评分组件、表单提交和数据绑定。以下是具体实现方法：

使用第三方评分组件

安装vue-star-rating库：

npm install vue-star-rating

组件引入：

import StarRating from 'vue-star-rating'
export default {
  components: {
    StarRating
  }
}

模板中使用：

<star-rating 
  v-model="rating" 
  :increment="0.5" 
  :star-size="30"
></star-rating>

自定义评分组件

创建五角星评分组件：

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

样式控制：

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

评价表单实现

结合表单提交评价内容：

<textarea v-model="comment" placeholder="输入评价内容"></textarea>
<button @click="submitReview">提交评价</button>

数据处理：

data() {
  return {
    rating: 0,
    comment: ''
  }
},
methods: {
  submitReview() {
    axios.post('/api/reviews', {
      rating: this.rating,
      content: this.comment
    })
  }
}

评价列表展示

获取并展示评价数据：

data() {
  return {
    reviews: []
  }
},
created() {
  axios.get('/api/reviews').then(res => {
    this.reviews = res.data
  })
}

模板渲染：

<div v-for="review in reviews" :key="review.id">
  <div>评分：{{ review.rating }}</div>
  <p>{{ review.content }}</p>
</div>

实现半星评分

改进自定义组件支持半星：

<div class="rating" @mousemove="setTempRating" @mouseleave="resetTempRating">
  <span 
    v-for="star in 10" 
    :key="star"
    @click="setRating(star)"
    :class="getStarClass(star)"
  >{{ star % 2 ? '★' : '☆' }}</span>
</div>

计算属性处理：

vue实现评价

getStarClass(star) {
  return {
    'active': star <= this.currentRating,
    'half-active': star <= this.tempRating && star > this.currentRating
  }
}