feat(播放控制): 为曲目列表添加点击播放功能
- 在 TrackItem 组件中添加 playfrom 属性,用于接收播放函数 - 修改 playTheAlbum 函数支持从指定索引开始播放 - 为 TrackItem 按钮添加点击事件,点击时调用 playfrom 函数
This commit is contained in:
parent
9d9b32d47d
commit
cc6c6e311e
|
@ -4,13 +4,15 @@ import { artistsOrganize } from '../utils'
|
||||||
defineProps<{
|
defineProps<{
|
||||||
album?: Album,
|
album?: Album,
|
||||||
track: Song,
|
track: Song,
|
||||||
index: number
|
index: number,
|
||||||
|
playfrom: (index: number) => void,
|
||||||
}>()
|
}>()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<button
|
<button
|
||||||
class="flex align-center gap-4 text-left odd:bg-neutral-800/20 px-2 h-[2.75rem] rounded-md hover:bg-neutral-800 align-center relative overflow-hidden">
|
class="flex align-center gap-4 text-left odd:bg-neutral-800/20 px-2 h-[2.75rem] rounded-md hover:bg-neutral-800 align-center relative overflow-hidden"
|
||||||
|
@click="playfrom(index)">
|
||||||
|
|
||||||
<span class="text-[3.7rem] text-white/20 absolute right-0 top-[-1.4rem] track_num">{{ index + 1 }}</span>
|
<span class="text-[3.7rem] text-white/20 absolute right-0 top-[-1.4rem] track_num">{{ index + 1 }}</span>
|
||||||
|
|
||||||
|
|
|
@ -30,7 +30,7 @@ onMounted(async () => {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
function playTheAlbum() {
|
function playTheAlbum(from: number = 0) {
|
||||||
if (playQueue.queueReplaceLock) {
|
if (playQueue.queueReplaceLock) {
|
||||||
if (!confirm("当前操作会将你的待播列表清空、放入这张专辑所有曲目,并从新待播清单的开头播放。继续吗?")) { return }
|
if (!confirm("当前操作会将你的待播列表清空、放入这张专辑所有曲目,并从新待播清单的开头播放。继续吗?")) { return }
|
||||||
playQueue.queueReplaceLock = false
|
playQueue.queueReplaceLock = false
|
||||||
|
@ -45,7 +45,7 @@ function playTheAlbum() {
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
playQueue.list = newPlayQueue
|
playQueue.list = newPlayQueue
|
||||||
playQueue.currentIndex = 0
|
playQueue.currentIndex = from
|
||||||
playQueue.isPlaying = true
|
playQueue.isPlaying = true
|
||||||
playQueue.isBuffering = true
|
playQueue.isBuffering = true
|
||||||
}
|
}
|
||||||
|
@ -72,7 +72,7 @@ function playTheAlbum() {
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<button
|
<button
|
||||||
class="bg-sky-500/20 hover:bg-sky-500/30 active:bg-sky-600/30 active:shadow-inner border border-[#ffffff39] rounded-full w-56 h-10 text-base text-white flex justify-center items-center gap-2"
|
class="bg-sky-500/20 hover:bg-sky-500/30 active:bg-sky-600/30 active:shadow-inner border border-[#ffffff39] rounded-full w-56 h-10 text-base text-white flex justify-center items-center gap-2"
|
||||||
@click="playTheAlbum">
|
@click="playTheAlbum()">
|
||||||
<PlayIcon :size="4" />
|
<PlayIcon :size="4" />
|
||||||
<div>播放专辑</div>
|
<div>播放专辑</div>
|
||||||
</button>
|
</button>
|
||||||
|
@ -93,7 +93,7 @@ function playTheAlbum() {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
<TrackItem v-for="(track, index) in album?.songs" :key="track.cid" :album="album" :track="track" :index="index" />
|
<TrackItem v-for="(track, index) in album?.songs" :key="track.cid" :album="album" :track="track" :index="index" :playfrom="playTheAlbum" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue
Block a user