vue实现等级选择

Vue 实现等级选择功能

等级选择功能通常用于评分、评价或选择优先级等场景，可以通过多种方式实现，例如使用星级评分、下拉选择或单选按钮组。

使用星级评分组件

星级评分是常见的等级选择方式，用户可以通过点击星星数量来设定等级。

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

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

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

使用下拉选择框

通过下拉菜单实现等级选择，适合需要精确选择等级的场景。

<template>
  <div>
    <select v-model="selectedRating">
      <option disabled value="">请选择等级</option>
      <option v-for="level in 5" :value="level" :key="level">
        {{ level }}级
      </option>
    </select>
    <p>当前等级: {{ selectedRating }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRating: ''
    }
  }
}
</script>

使用单选按钮组

通过单选按钮实现等级选择，适合需要明确展示所有选项的场景。

<template>
  <div>
    <div v-for="level in 5" :key="level">
      <input 
        type="radio" 
        :id="'level' + level" 
        :value="level" 
        v-model="selectedRating"
      >
      <label :for="'level' + level">{{ level }}级</label>
    </div>
    <p>当前等级: {{ selectedRating }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRating: null
    }
  }
}
</script>

使用滑块选择

通过滑块实现等级选择，适合需要连续调整等级的场景。

<template>
  <div>
    <input 
      type="range" 
      min="1" 
      max="5" 
      v-model="selectedRating"
    >
    <p>当前等级: {{ selectedRating }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRating: 1
    }
  }
}
</script>

使用第三方组件库

可以使用现成的UI组件库快速实现等级选择功能，例如Element UI、Vuetify等。

<template>
  <div>
    <el-rate v-model="selectedRating"></el-rate>
    <p>当前等级: {{ selectedRating }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedRating: 0
    }
  }
}
</script>

以上方法可以根据具体需求选择适合的实现方式，星级评分适合直观展示，下拉选择适合精确选择，单选按钮适合选项较少的情况，滑块适合连续调整，第三方组件库可以快速实现美观的效果。