【vue3仿网易云app】歌单播放列表实现

1. 歌单顶部背景滤镜效果

            <div class="contentLeft">
                <img :src="playlist.coverImgUrl">
                <div class="count"> 
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-24gl-play"></use>
                    </svg>
                    <span>{{changeValue(playlist.playCount) }}</span> 
                </div>
            </div>

使用filter:blur 进行背景模糊

    .bg{
        position: fixed;
        left: 0;
        top: 0;
        width: 7.5rem;
        height: auto;
        z-index: -1;
        filter: blur(40px);
    }

2.歌单长列表
使用v-for循环来渲染item

            <div class="playItem" v-for="(item,i) in playlist.tracks" :key="i">
                <div class="left">
                    <div class="index">{{i+1}}</div>
                    <div class="content">
                        <div class="title">{{item.name}}</div>
                        <div class="anthor">
                            <span class="tag" v-for="(tag,index) in playlist.tags" :key="index">{{tag}}</span>
                            <span>{{item.al.name}}</span>
                            
                            </div>
                    </div>
                </div>
                <div class="right">
                    <svg class="icon" aria-hidden="true" @click="setPlayIndex(i)">
                    <use xlink:href="#icon-bofangqi"></use>
                    </svg>
                    
                    <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-31liebiao"></use>
                    </svg>
                </div>
            
            
            </div>

点击播放按钮时把当前索引传入setPlayIndex

@click="setPlayIndex(i)"