1. star评分组件
(1)实现方法一,适用于切出每个图标的情况,可以传入分数和图标的大小。
<template>
<div class="score" :class="starSize">
<span v-for="(itemClass, index) in itemClasses" :class="['star', itemClass]" :key="index"></span>
</div>
</template>
<script>
export default {
props: {
star: {
type: Number,
default: 0
},
size: {
type: Number,
default: 36
}
},
data () {
return {
itemClasses: []
}
},
created () {
this.initStar()
},
computed: {
starSize () {
return 'star-' + this.size
}
},
methods: {
initStar () {
if (this.star > 5) {
this.star = 5
}
for (var i = 1; i <= 5; i++) {
if (this.star >= i) {
this.itemClasses.push('on')