vue3:星星评分组件

一、效果

二、代码

子组件stars.vue：

<template><div class="stars"><div class="star" v-for="star in stars" :key="star" @click="setScore(star)"><svgt="1719659437525"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="2422"width="30"height="30"ref="starRef"@mousemove="onMousemove(star)"@mouseleave="onMouseleave"><path:class="{ highlighted: star <= scoreMove }"d="M313.991837 914.285714c-20.37551 0-40.228571-6.269388-56.946939-18.808163-30.302041-21.942857-44.930612-58.514286-38.661225-95.085714l24.032654-141.061225c3.134694-18.285714-3.134694-36.571429-16.195919-49.110204L123.297959 509.910204c-26.644898-26.122449-36.04898-64.261224-24.555102-99.787755 11.493878-35.526531 41.795918-61.126531 78.889796-66.35102l141.583674-20.375511c18.285714-2.612245 33.959184-14.106122 41.795918-30.30204l63.216326-128.522449C440.946939 130.612245 474.383673 109.714286 512 109.714286s71.053061 20.897959 87.24898 54.334694L662.987755 292.571429c8.359184 16.195918 24.032653 27.689796 41.795918 30.30204l141.583674 20.375511c37.093878 5.22449 67.395918 30.82449 78.889796 66.35102 11.493878 35.526531 2.089796 73.665306-24.555102 99.787755l-102.4 99.787755c-13.061224 12.538776-19.330612 31.346939-16.195919 49.110204l24.032654 141.061225c6.269388 37.093878-8.359184 73.142857-38.661225 95.085714-30.302041 21.942857-69.485714 24.555102-102.4 7.314286L538.122449 836.440816c-16.195918-8.359184-35.526531-8.359184-51.722449 0l-126.955102 66.87347c-14.628571 7.314286-30.302041 10.971429-45.453061 10.971428z m162.481632-96.653061z":fill="star <= score ? 'rgb(240, 224, 17)' : 'rgba(108, 113, 120, 1)'"p-id="2423"></path></svg></div></div>
</template>
<script setup lang="ts">
import { computed, ref } from "vue";
const props = defineProps<{count: number;
}>();
//可选，作为选择后的额外操作
const emit = defineEmits(["update:count"]);//分数,鼠标移入后的分数
const scoreMove = ref(-1);
//与父组件的数据绑定的分数
const score = defineModel("starsNum", {type: Number,default: 0,
});
const stars = computed(() => {return props.count;
});
const setScore = (index: number) => {score.value = index;emit("update:count", index);
};const onMousemove = (index: number) => {scoreMove.value = index;
};
const onMouseleave = () => {scoreMove.value = 0;
};
</script>
<style scoped>
.stars {display: flex;justify-content: center;align-items: center;
}
.star {width: 30px;height: 30px;border-radius: 50%;
}
.highlighted {fill: rgb(251, 234, 47);
}
.num {font-size: 20px;margin-left: 10px;
}
</style>

父组件:

<template><div class="page"><div class="strasBox"><div class="starDiv"><starts:count="count1"v-model:starsNum="starsNum.count1"@update:count="setCount1"></starts><span>{{ starsNum.count1 }}</span></div><div class="starDiv"><starts :count="count1" v-model:starsNum="starsNum.count2"></starts><span>{{ starsNum.count2 }}</span></div><div class="starDiv"><starts :count="count1" v-model:starsNum="starsNum.count3"></starts><span>{{ starsNum.count3 }}</span></div></div></div>
</template><script setup lang="ts">
import { ref, reactive } from "vue";
import starts from "../components/stars.vue";
const count1 = ref(5);let starsNum = reactive({count1: 0,count2: 0,count3: 0,
});//一键设置三个星星的值
let flag = true;
const setCount1 = (payload: number) => {if (flag) {starsNum.count2 = payload;starsNum.count3 = payload;flag = false;}
};
</script>
<style scoped>
.page {width: 100%;height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #ce9f9f;
}
.starDiv {display: flex;justify-content: center;align-items: center;font-size: 24px;font-weight: 800;color: #ffffff;
}
span {margin-left: 10px;
}
</style>
ht