当前位置：首页 > VUE

vue实现等级选择

2026-01-08 04:16:18VUE

实现等级选择的方法

在Vue中实现等级选择功能，可以通过多种方式完成，以下是几种常见的实现方法：

使用v-for渲染星级选择

通过v-for指令循环渲染星级图标，结合点击事件实现等级选择：

vue实现等级选择

<template>
  <div>
    <span 
      v-for="star in 5" 
      :key="star"
      @click="selectRating(star)"
      :class="{ 'active': star <= selectedRating }"
    >
      ★
    </span>
    <p>当前选择: {{ selectedRating }}星</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRating: 0
    }
  },
  methods: {
    selectRating(rating) {
      this.selectedRating = rating
    }
  }
}
</script>

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

使用第三方组件库

许多UI组件库提供了现成的评分组件，如Element UI的Rate组件：

vue实现等级选择

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

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

自定义SVG星级组件

创建更灵活的自定义星级组件：

<template>
  <div class="star-rating">
    <svg 
      v-for="star in stars" 
      :key="star.index"
      @click="setRating(star.index)"
      :class="{ 'filled': star.filled }"
      width="30" height="30" 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 {
  props: {
    maxRating: {
      type: Number,
      default: 5
    },
    value: {
      type: Number,
      default: 0
    }
  },
  computed: {
    stars() {
      return Array.from({ length: this.maxRating }, (_, i) => ({
        index: i + 1,
        filled: i < this.value
      }))
    }
  },
  methods: {
    setRating(rating) {
      this.$emit('input', rating)
    }
  }
}
</script>

<style>
.star-rating svg {
  fill: #ddd;
  cursor: pointer;
  margin-right: 5px;
}
.star-rating svg.filled {
  fill: #ffc107;
}
</style>

支持半星选择

实现更精细的半星选择功能：

<template>
  <div class="half-star-rating">
    <div 
      v-for="star in stars" 
      :key="star.index"
      class="star-container"
      @mouseover="hoverRating = star.index"
      @mouseleave="hoverRating = 0"
      @click="setRating(star.index)"
    >
      <div class="star-background">★</div>
      <div 
        class="star-foreground" 
        :style="{ width: getFillWidth(star.index) }"
      >★</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      rating: 0,
      hoverRating: 0,
      stars: Array.from({ length: 5 }, (_, i) => ({ index: i + 1 }))
    }
  },
  methods: {
    setRating(rating) {
      this.rating = rating
    },
    getFillWidth(index) {
      const displayRating = this.hoverRating || this.rating
      if (index <= displayRating) return '100%'
      if (index - 0.5 <= displayRating) return '50%'
      return '0%'
    }
  }
}
</script>

<style>
.half-star-rating {
  display: flex;
  font-size: 2rem;
}
.star-container {
  position: relative;
  cursor: pointer;
  color: #ddd;
}
.star-background, .star-foreground {
  position: absolute;
  overflow: hidden;
}
.star-foreground {
  color: gold;
  width: 0%;
}
</style>