借助APlayer、MetingJS实现

1、src/publi/index.html引入

<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2.0.1/dist/Meting.min.js"></script>

2、新建一个musicPlayer.vue

<template><meting-js  server="netease" type="playlist":id="musicId" fixed="true" theme="#e9546b"></meting-js>
</template><script >export default {name: "musicPlayer",data() {return {musicId: '自己的id',}},}
</script><style scoped></style>

3、app.vue
script 内引入音乐组件页面

import MusicPlayer from '@/components/MusicPlayer/musicPlayer.vue'

template 内使用映入的音乐播放界面，app.vue内引入是全局的，网站的所有页面都可以使用

<MusicPlayer></MusicPlayer>

4、修改样式

/* 音乐播放器显示隐藏 */
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {left: -66px !important;
}.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {left: 0 !important;
}

5、效果