vue评分实现

Vue 评分组件实现方法

使用第三方库（如 Element UI）

安装 Element UI：

npm install element-ui

引入并注册组件：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

模板中使用：

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

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

自定义评分组件

创建 StarRating.vue 组件：

<template>
  <div class="star-rating">
    <span 
      v-for="star in maxStars" 
      :key="star" 
      @click="setRating(star)"
      :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
    }
  },
  methods: {
    setRating(star) {
      this.currentRating = star
      this.$emit('rating-changed', star)
    }
  }
}
</script>

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

使用 SVG 图标实现

创建 SvgStarRating.vue：

<template>
  <div class="svg-rating">
    <svg 
      v-for="star in maxStars" 
      :key="star" 
      @click="setRating(star)"
      :class="{ 'active': star <= currentRating }"
      width="24" 
      height="24" 
      viewBox="0 0 24 24"
    >
      <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
    </svg>
  </div>
</template>

<script>
export default {
  // 同上一个组件的 script 部分
}
</script>

<style>
.svg-rating svg {
  fill: #ccc;
  cursor: pointer;
}
.svg-rating svg.active {
  fill: gold;
}
</style>

实现半星评分

修改自定义组件：

<template>
  <div class="half-star-rating">
    <div 
      v-for="star in maxStars" 
      :key="star" 
      class="star-container"
      @mouseover="hoverRating = star"
      @mouseleave="hoverRating = 0"
      @click="setRating(star)"
    >
      <div class="star-background">★</div>
      <div 
        class="star-foreground" 
        :style="{ width: (hoverRating || currentRating) >= star ? '100%' : '0%' }"
      >★</div>
    </div>
  </div>
</template>

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

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

使用 Vue 动画效果

为评分添加过渡动画：

<template>
  <transition-group name="star" tag="div" class="animated-rating">
    <span 
      v-for="star in maxStars" 
      :key="star" 
      @click="setRating(star)"
      :class="{ 'active': star <= currentRating }"
    >★</span>
  </transition-group>
</template>

<style>
.star-enter-active, .star-leave-active {
  transition: all 0.5s ease;
}
.star-enter, .star-leave-to {
  opacity: 0;
  transform: translateY(30px);
}
</style>

双向绑定实现

实现 v-model 支持：

export default {
  props: ['value'],
  data() {
    return {
      internalValue: this.value
    }
  },
  watch: {
    value(newVal) {
      this.internalValue = newVal
    },
    internalValue(newVal) {
      this.$emit('input', newVal)
    }
  }
}