vue实现打星

实现打星评分功能

在Vue中实现打星评分功能可以通过自定义组件完成，利用v-for渲染星星图标，并通过事件绑定实现交互。以下是具体实现方法：

基础实现代码

创建StarRating.vue组件：

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

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

<style>
.star-rating {
  font-size: 24px;
  color: gold;
  cursor: pointer;
}
.star-rating span {
  margin-right: 5px;
}
</style>

使用方法

在父组件中引入并使用：

<template>
  <div>
    <StarRating 
      :max-stars="5" 
      :initial-rating="3" 
      @rated="handleRating"
    />
  </div>
</template>

<script>
import StarRating from './StarRating.vue'

export default {
  components: {
    StarRating
  },
  methods: {
    handleRating(rating) {
      console.log('用户评分:', rating)
    }
  }
}
</script>

进阶功能实现

实现半星评分功能：

<template>
  <div class="star-rating">
    <span 
      v-for="star in maxStars" 
      :key="star"
      @click="setRating(star)"
      @mousemove="setPreciseRating($event, star)"
    >
      <span class="star-background">☆</span>
      <span 
        class="star-foreground" 
        :style="{ width: getStarWidth(star) }"
      >★</span>
    </span>
  </div>
</template>

<script>
export default {
  props: {
    maxStars: {
      type: Number,
      default: 5
    },
    initialRating: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      currentRating: this.initialRating,
      preciseRating: 0
    }
  },
  methods: {
    setRating(star) {
      this.currentRating = star
      this.preciseRating = star
      this.$emit('rated', star)
    },
    setPreciseRating(event, star) {
      const starElement = event.target
      const rect = starElement.getBoundingClientRect()
      const percentage = (event.clientX - rect.left) / rect.width
      this.preciseRating = star - 1 + percentage
    },
    getStarWidth(star) {
      if (this.preciseRating >= star) return '100%'
      if (this.preciseRating > star - 1) return `${(this.preciseRating - (star - 1)) * 100}%`
      return '0%'
    }
  }
}
</script>

<style>
.star-rating {
  font-size: 24px;
  color: #ddd;
  cursor: pointer;
  display: inline-flex;
}
.star-rating > span {
  position: relative;
  margin-right: 5px;
}
.star-background {
  color: #ddd;
}
.star-foreground {
  color: gold;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}
</style>

使用第三方库

如需更复杂功能，可考虑使用现成库：

npm install vue-star-rating

使用示例：

<template>
  <star-rating 
    :rating="rating"
    :increment="0.5"
    :max-rating="5"
    @rating-selected="setRating"
  />
</template>

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

export default {
  components: {
    StarRating
  },
  data() {
    return {
      rating: 3.5
    }
  },
  methods: {
    setRating(rating) {
      this.rating = rating
    }
  }
}
</script>

以上实现方案提供了从基础到进阶的打星评分功能，可根据项目需求选择适合的方案。自定义组件方式灵活性高，而第三方库则可以快速实现复杂交互效果。