网易云歌单详情

点击底下的歌曲播放头像，会显示歌单详情

1.新建playMusic组件

2.在playcontroller引入组件，注册及使用

3.默认歌单详情不显示

<playMusic v-show="show"></playMusic>

data() {
           return {
               paused: true,
               show:false//歌单详情是否显示
          }
      },

4.控制歌单详情的显示(show取反)

<div class="left" @click="show=!show">

5.设置返回按钮

在playMusic.vue里面

<div class="playMusic">
           <div class="back" >
               <svg class="icon" aria-hidden="true"  @click="$emit('myback')">
                   <use xlink:href="#icon-sdf"></use>
​
               </svg>
           </div>

 

playController.vue自定义触发事件取反

<!--使用歌单详情组件-->
<playMusic v-show="show" @myback="show=!show"></playMusic>