Vue2仿网易云风格音乐播放器

以下是一个简化版本的Vue 2音乐播放器示例代码，仅包含核心功能和样式：

<template>
  <div class="music-player">
    <div class="progress-bar">
      <button @click="prev">上一曲</button>
      <button @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
      <button @click="next">下一曲</button>
      <div class="progress" @click="setProgress($event)">
        <div class="played" :style="{ width: progressBarWidth }"></div>
      </div>
    </div>
    <div class="song-info">
      <h2>{{ currentSong.name }}</h2>
      <artist-list :artists="currentSong.artists"></artist-list>
    </div>
  </div>
</template>
 
<script>
import ArtistList from './ArtistList.vue';
 
export default {
  components: {
    ArtistList
  },
  data() {
    return {
      currentSong: {
        name: '歌曲名称',
        artists: [{ name: '艺术家1' }, { name: '艺术家2' }]
      },
      isPlaying: false,
      progress: 0,
      songDuration: 200 // 假设的歌曲总时长（单位：秒）
    };
  },
  computed: {
    progressBarWidth() {
      return `${this.progress / this.songDuration * 100}%`;
    }
  },
  methods: {
    togglePlay() {
      this.isPlaying = !this.isPlaying;
    },
    prev() {
      // 上一曲的逻辑
    },
    next() {
      // 下一曲的逻辑
    },
    setProgress(event) {
      // 设置播放进度的逻辑
    }
  }
};
</script>
 
<style scoped>
.music-player {
  display: flex;
  align-items: center;
}
.progress-bar {
  flex-grow: 1;
  position: relative;
}
.progress {
  height: 5px;
  background-color: #e5e5e5;
  cursor: pointer;
}
.played {
  height: 100%;
  background-color: #31c27c;
  transition: width 0.1s;
}
.song-info {
  margin-left: 20px;
}
button {
  margin-right: 10px;
}
</style>

在这个示例中，我们创建了一个简单的音乐播放器界面，包括播放、暂停、上一曲和下一曲的按钮，以及一个进度条。进度条可以被点击并且调整歌曲的播放进度，同时展示了如何使用计算属性来动态设置进度条的宽度。这个示例假设ArtistList组件已经存在并正确导入。