使用vue3 unocss 实现一个星星评分组件

月末了。。还没更新 水一篇(狗头)

使用vue3 + unocss 文档地址 (opens new window)

用到了iconify图标 需要安装一下 pnpm add @iconify-json/ic -D

参考了一下element-plus的实现方式 源码地址 (opens new window)

// Rate.vue
<script setup lang="ts">
defineProps({
  value: {
    default: 0,
  },
  max: {
    default: 5,
  },
  readonly: {
    default: true,
  },
})
defineEmits(['update:value'])

const hoverRate = ref(0)

</script>

<template>
  <div class="flex">
    <div
      v-for="(item, index) in max" :key="index"
      class="text-#5D5D64 transition i-ic:baseline-star transform-gpu"
      :class="{
        'bg-#F0B00A': hoverRate > 0 ? item <= hoverRate : item <= value,
        'cursor-pointer': !readonly,
        'hover:scale-115': !readonly
      }"
      @mousemove="!readonly && (hoverRate = item)"
      @mouseleave="!readonly && (hoverRate = 0)"
      @click="$emit('update:value', item)"
    />
  </div>
</template>

// 使用
<Rate v-model:value="rate" :readonly="false" class="text-22px" />
// 显示用
<Rate :value="rate" class="text-22px" />