首先:完成song-list的dom结构和css样式:
<div class="rank" v-show="rank">
<span :class="getRankCls(index)">{{getRankIndex(index)}}</span>
</div>
.rank
flex 0 0 25px
width 25px
margin-right 30px
text-align center
.icon
display inline-block
width 25px
height 24px
background-size 25px 24px
&.icon0
bg-image('first')
&.icon1
bg-image('second')
&.icon2
bg-image('third')
.text
color $color-theme
font-size $font-size-large
然后这个组件接收一个props:
props: {
rank: {
type: Boolean,
default: false
}
}
这里可以通过两个方法来设置css
getRankCls (index) {
if (index <= 2) {
return `icon icon${index}`
} else {
return 'text'
}
},
getRankIndex (index) {
if (index > 2) {
return index
}
}
然后呢,因为这个组件是music-list调用的,所以它也应该接收一个props,传递给song-list组件:
<song-list :rank="rank" :songs="songs" @select="selectItem"></song-list>
rank: {
type: Boolean,
default: false
}
然后,在top-list组件里面定义rank为true,传递出来:
data () {
return {
rank: true
}
},
<music-list :rank="rank" :title="title" :bg-image="bgImage" :songs="songs"></music-list>