vue慕课网音乐项目手记：41-topList排行榜样式的实现

首先：完成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>