vue音乐播放条

先看效果

再看代码

<template><div class="footer-player z-30 flex items-center p-2"><div v-if="isShow" class="h-12 w-60 overflow-hidden"><div :style="activeStyle" class="open-detail-control-wrap"><div class="flex h-full w-40 items-center"><div ref="triggerRef" class="relative" @click="handleArrowClick"><n-imageclass="size-12":src="currentSong?.al?.picUrl":preview-disabled="true":style="{filter:isHover ? 'blur(1px)' : 'none'}"/><transition v-show="isHover" name="fade"><div class="flex-items-justify-center absolute left-0 top-0 z-10  size-12 bg-black/60"><n-icon :component="KeyboardArrowUpOutlined" size="35" color="white" /></div></transition></div><div class="ml-4"><p class="flex items-center text-base"><n-ellipsis style="max-width: 150px">{{ currentSong?.name }}</n-ellipsis><heart-icon:id="mainStore.currentPlaySong.id" class="ml-2" :like="mainStore.currentPlaySong.like"@like-success="likeSuccess"/> </p><n-ellipsis><p>{{ formateSongsAuthor(currentSong?.ar || []) }}</p></n-ellipsis></div></div><div class="flex h-12 items-center"><n-iconsize="35" :component="KeyboardArrowDownOutlined" class="ml-4"@click="mainStore.setShowMusicDetail(false)"/><div class="ml-4"><div class="circleContainer" @click="handleLikeHeartClick"><heart-icon:id="mainStore.currentPlaySong.id"ref="heardLikeRef" :like="mainStore.currentPlaySong.like":size="25" :trigger-click="true" @like-success="likeSuccess"/> </div></div><div class="circleContainer ml-4" @click="subscribeModalRef?.show()"><n-icon :component="AddBoxOutlined" :size="20" /></div></div></div></div><div :style="{opacity:isShow ? '1' : '0.6'}" class="control flex flex-1 flex-col items-center"><div v-if="!isShow" class="footer-player absolute z-50 w-full" /><div style="width:300px" class="flex items-center justify-between"><n-iconclass="custom-icon" :size="22" :component="currentPlayModeIcon"@click="handlePlayModeClick"/><n-iconclass="prev custom-icon" :size="22" :component="SkipPreviousSharp"@click="handlePrevClick"/><divclass="flex size-8 items-center justify-center rounded-full  bg-neutral-200/60 hover:bg-neutral-200 dark:bg-slate-100/20 dark:hover:bg-slate-100/40" @click="togglePlayStatus"><n-icon :size="mainStore.playing ? 14 : 20" :component="mainStore.playing ? StopIcon :PlayArrowSharp" </div><n-iconclass="next custom-icon" :size="22" :component="SkipNextSharp"@click="handleNextClick"/></div><div class="mt-1 flex items-center"><span v-if="isShow" class="mr-2 text-xs opacity-50">{{ currentPlayTime }}</span><div class="flex flex-1 items-center" :style="{width:progressWidth+'px'}"><slider-barv-model="percentage":load-value="progressValue"@on-done="handleSliderDone"@change="handleSliderChange"/></div><span v-if="isShow" class="ml-2 text-xs opacity-50"><n-time format="mm:ss" :time="currentSong?.dt" /></span></div></div><div v-if="isShow" class="flex w-60 items-center justify-end"><n-popoverplacement="bottom"trigger="hover"><template #trigger><n-icon:component="volume === 0 ? VolumeOffRound : VolumeUpRound" :size="25" class="custom-icon mr-2"@click="handleVolumeClick"/></template><n-slider:value="volume" vertical style="height:100px"@update-value="handleVolumeChange"/></n-popover><n-icon:component="List" :size="25" class="custom-icon mr-2"@click="playListRef?.show()"/></div><audioref="audioRef":src="currentSong?.url"preload="auto" @timeupdate="handleTimeupdate" @ended="handleEnded"@playing="handlePlaying" @progress="updateBuffer" @loadeddata="handleLoadeddata"@error="handleError" @waiting="handleWaiting" /><play-list ref="playListRef" /><music-detail v-if="mainStore.currentPlaySong?.id" ref="musicDetailRef" /><subscribe-play-list-modalv-if="mainStore.currentPlaySong?.id" ref="subscribeModalRef" :tracks="mainStore.currentPlaySong?.id"/></div>
</template>