使用vue3 unocss 实现一个星星评分组件
cinob 3/30/2022 javascriptvuevue3unocss
月末了。。还没更新 水一篇(狗头)
使用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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// 使用
<Rate v-model:value="rate" :readonly="false" class="text-22px" />
// 显示用
<Rate :value="rate" class="text-22px" />
1
2
3
4
2
3
4