高亮正在播放的

This commit is contained in:
2023-10-02 06:44:37 +08:00
parent 272be4d3d8
commit e5ca640067
2 changed files with 7 additions and 1 deletions

View File

@ -34,7 +34,7 @@
console.log('播放音乐', item.name) console.log('播放音乐', item.name)
}, },
onstop: item => { onstop: item => {
console.log('停止音乐', item.name) console.log('停止音乐', item?.name)
}, },
onlike: (item, list) => { onlike: (item, list) => {
console.log('喜欢音乐', item) console.log('喜欢音乐', item)

View File

@ -42,6 +42,9 @@ export default class MusicList {
ul.music-list > li { ul.music-list > li {
cursor: pointer; cursor: pointer;
} }
ul.music-list > li.play {
color: #02be08;
}
ul.music-list > li.cache::marker { ul.music-list > li.cache::marker {
color: #02be08; color: #02be08;
font-size: 1em; font-size: 1em;
@ -88,10 +91,13 @@ export default class MusicList {
if (event.target.dataset.play === 'play') { if (event.target.dataset.play === 'play') {
event.target.dataset.play = 'stop' event.target.dataset.play = 'stop'
event.target.innerText = '播放' event.target.innerText = '播放'
this.ul.querySelector(`#${item.id}`).classList.remove('play')
this.stop() this.stop()
} else { } else {
event.target.dataset.play = 'play' event.target.dataset.play = 'play'
event.target.innerText = '停止' event.target.innerText = '停止'
this.ul.querySelectorAll('li.play').forEach(li => li.classList.remove('play'))
this.ul.querySelector(`#${item.id}`).classList.add('play')
this.play(item) this.play(item)
} }
} }