效果:
父组件:
<star size=48 :score="seller.score"></star>
星星组件:
<template> <!-- 评分星星的组件 -->
<div class="star" :class="starType"> <!-- starType是星星的类型,不同的地方显示的星星大小不一样 -->
<span v-for="item in itemClass" class="star-item" :class="item"></span> <!-- itemClass是数组,有on,half,off,全星,半星,无 -->
</div>
</template>
<script>
const STAR_LEN = 5; // 星星的个数
export default {
props: ['size', 'score'], // 父组件传来星星的大小和分数
computed: {
starType() {
return 'star-' + this.size; // 计算属性,将starType变为star-加星星大小
},
itemC