从浏览器的显示看,在5颗星星显示的位置有变化,但是高度为0显示不出来。设置的高度和宽度也不起作用,改变高度也没有效果。
下面是我的代码:
<div class="star-wrapper">
<star :size="48" :score="seller.score"></star>
</div>
<template>
<div class="star" :class="starType">
<span v-for="(itemClass,index) in itemClasses" v-bind:key="index" :class="itemClass" class="star-item" ></span>
</div>
</template>
<script type="text/ecmascript-6">
const LENGTH = 5;
const CLS_ON = 'on';
const CLS_HALF = 'half';
const CLS_OFF = 'off';
export default {
props: {
size: {
type: Number
},
score: {
type: Number
}
},
computed: {
starType () {
return 'star-' + this.size;
},
itemClasses () {
let result = [];
let score = Math.floor(this.score * 2) / 2;
let hasDecimal = score % 1 !== 0;
let integer = Math.floor(score);
for (let i = 0; i < integer; i++) {
result.push(CLS_ON);
}
if (hasDecimal) {
result.push(CLS_HALF);
}
while (result.length < LENGTH) {
result.push(CLS_OFF);
}
return result;
}
}
};
</script>
<style lang="stylus" rel="stylesheet/stylus">
@import "../../common/stylus/mixin";
.star
font-size:0
.star-item
dispaly: inline-block
background-repeat: no-repeat
&.star-48
.star-item
width: 20px
height: 20px
margin-right: 22px
background-size: 20px 20px
&: last-child
margin-right: 0
& .on
bg-image('star48_on')
& .half
bg-image('star48_half')
& .off
bg-image('star48_off')
&.star-36
.star-item
width: 15px
height: 15px
margin-right: 6px
background-size: 15px 15px
&:last-child
margin-right: 0
&.on
bg-image('star36_on')
&.half
bg-image('star36_half')
&.off
bg-image('star36_off')
&.star-24
.star-item
width: 10px
height: 10px
margin-right: 3px
background-size: 10px 10px
&:last-child
margin-right: 0
&.on
bg-image('star24_on')
&.half
bg-image('star24_half')
&.off
bg-image('star24_off')
</style>
这是什么原因引起的,怎样解决呢?
谢谢