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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/854396.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

有什么可以创建ai聊天的软件?5个软件帮助你快速创建ai聊天

有什么可以创建ai聊天的软件&#xff1f;5个软件帮助你快速创建ai聊天 AI聊天软件是一种利用人工智能技术构建的聊天机器人系统&#xff0c;它能够模拟人类的对话方式&#xff0c;回答用户提出的问题或者进行对话。这类软件在各个领域都有广泛的应用&#xff0c;可以用于客户服…

【产品经理】订单处理5-可售库存管理

可售库存即销售库存&#xff0c;本文讲解订单处理过程中的可售库存的管理。 本次讲解订单处理过程中的可售库存的管理。 可售库存即销售库存&#xff0c;电商ERP中的可售库存共分三种&#xff1a;商品的可售现货库存、商品的预售库存以及赠品的可售库存。 一、商品的可售现货…

Python基础用法 之 转义字符

将两个字符进⾏转义 表示⼀个特殊的字符 \n ---> 换⾏&#xff0c;回⻋ \t ---> 制表符, tab键 注意&#xff1a; print( end\n)&#xff1a; print() 函数中默认有⼀个 end\n, 所以,每个 print 结束之后, 都会输出⼀ 个换行。 未完待续。

HTML中的资源提示关键词

渲染阻塞问题 之前在学习浏览器的渲染原理的时候我们就知道&#xff1a;因为浏览器一次只能开启一个渲染主线程&#xff0c;所以当浏览器解析到script标签时会停止DOM树的构建&#xff0c;转而去执行script&#xff0c;如果script中引用的是外部脚本&#xff0c;则浏览器会先从…

MySQL Server和Server启动程序(一)

MySQL Server mysqld&#xff0c;也称为MySQL Server&#xff0c;是一个单线程多任务的程序&#xff0c;它在MySQL安装中执行大部分工作。它不会生成额外的进程。MySQL Server管理对包含数据库和表的MySQL数据目录的访问。数据目录也是其他信息&#xff08;如日志文件和状态文…

目标检测:NMS代码

非极大值抑制NMS是目标检测常用的后处理算法&#xff0c;用于剔除冗余检测框 总体概要&#xff1a; 对NMS进行分类&#xff0c;大致可分为以下六种&#xff0c;这里是依据它们在各自论文中的核心论点进行分类&#xff0c;这些算法可以同时属于多种类别。 分类优先&#xff1a;…

专业学习|博弈论-课程沿革

学习来源&#xff1a;北京大学刘霖《博弈论》MOOC公开课 备注&#xff1a;仅做学习分享&#xff0c;请勿转载&#xff0c;转载必究&#xff01; &#xff08;一&#xff09;博弈论的预备知识 基本的微积分的知识和概率论的知识。简单的说会求导数&#xff0c;会求简单的积分&am…

消息队列-Rabbit运行机制

Producer(生产者) 和 Consumer(消费者) Producer(生产者) :生产消息的一方&#xff08;邮件投递者&#xff09;Consumer(消费者) :消费消息的一方&#xff08;邮件收件人&#xff09; 消息一般由 2 部分组成&#xff1a;消息头&#xff08;或者说是标签 Label&#xff09;和 …

【已解决】chrome视频无法自动播放的问题

问题&#xff1a; 在用datav开发大屏的时候&#xff0c;放了一个视频组件&#xff0c;但是发现视频组件即使设置了自动播放&#xff0c;仍然无法自动播放 原因&#xff1a; 76 以上版本的谷歌浏览器只能在系统静音下自动播放 解决&#xff1a; 音频自动播放浏览器白名单设置&…

kafka在windows上的启动

启动zookeeper 解压kafka安装包到对应目录下&#xff0c;找到对应config目录下的zookeeper.properties文件 新建一个data文件夹&#xff0c;随便放哪 打开该文件&#xff0c;找到 dataDir/tmp/zookeeper 属性 将原来的属性值&#xff0c;修改为新建data文件夹地址&#xff0c;…

如何修改倍福CX7000PLC IP地址

我们可以通过登录网页修改PLC的IP地址,这个需要我们知道PLC的初始IP地址 1、浏览器直接输入PLC 的IP地址 2、点击修改按钮(就是那个旋转) 修改IP地址前DHCP要先disable关闭 。 3、DHCP关闭 4、点击保存 5、在CAT3里搜索 在SYSTEM双击,之后点击搜索,具体过程可以参考下…

【html】如何利用id选择器实现主题切换

今天给大家介绍一种方法来实现主题切换的效果 效果图&#xff1a; 源码&#xff1a; <!DOCTYPE html> <html lang"zh"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initia…

充电学习—5、healthed 电池服务

1、healthed服务监听接收内核kernel的电池事件&#xff0c;然后上传数据给framware层的batterysevice&#xff0c;BatteryService计算电池的电量&#xff0c;显示&#xff0c;绘制动画等 android电池系统框架&#xff1a; 2、healthd服务入口&#xff1a;android/system/cor…

2024年设计、数字化技术与新闻传播国际学术会议(ICDDTJ 2024)

2024年设计、数字化技术与新闻传播国际学术会议(ICDDTJ 2024) 2024 International Conference on Design, Digital Technology and Journalism 会议地点&#xff1a;哈尔滨&#xff0c;中国 网址&#xff1a;www.icddtj.com 邮箱: icddtjsub-conf.com 投稿主题请注明:ICDD…

python之Bible快速检索器

内容将会持续更新&#xff0c;有错误的地方欢迎指正&#xff0c;谢谢! python之Bible快速检索器 TechX 坚持将创新的科技带给世界&#xff01; 拥有更好的学习体验 —— 不断努力&#xff0c;不断进步&#xff0c;不断探索 TechX —— 心探索、心进取&#xff01; 助力快…

CSS入门基础2

目录 1.标签类型 2.块元素 3.行内元素 4.行内块元素 5.标签行内转换 6.背景样式 1.标签类型 标签以什么方式进行显示&#xff0c;比如div 自己占一行&#xff0c; 比如span 一行可以放很多个HTML标签一般分为块标签和行内标签两种类型&#xff1a; 块元素行内元素。 2.块…

数据结构进阶——AVL树

数据结构进阶——AVL树 0. 前言1. AVL树的概念2. AVL树节点&#xff0c;和树的定义3. AVL树的插入4. AVL树的旋转5. AVL树的验证6. AVL树的删除&#xff08;了解&#xff09;7. AVL树实现完整代码8. AVL树的性能 0. 前言 学习本章&#xff0c;需要大家先掌握搜索二叉树&#xf…

「6.18福利」精选大厂真题|笔试刷题陪伴|明天正式开屋啦 - 打卡赢价值288元丰厚奖励

&#x1f370;关于清隆学长 大家好&#xff0c;我是清隆&#xff0c;拥有ACM区域赛 银牌&#x1f948;&#xff0c;CCCC天梯赛 国一&#xff0c;PTA甲级 98 分。 致力于算法竞赛和算法教育已有 3 年&#xff0c;曾多次 AK 互联网大厂笔试&#xff0c;大厂实习经验丰富。 打卡…

新手如何入门Web3?

一、什么是Web3&#xff1f; Web3是指下一代互联网&#xff0c;它基于区块链技术&#xff0c;致力于将各种在线活动变得更加安全、透明和去中心化。Web3是一个广义的概念&#xff0c;涵盖了包括数字货币、去中心化应用、智能合约等在内的多个方面。它的主要特点包括去中心化、区…

cesium ClippingPolygon多边形裁切

1.多边形裁切 1.1 基本流程 cesium117版本添加了多边形裁切功能&#xff0c;本文分析源码&#xff0c;看看是如何处理的。多边形裁切的大概流程分为4部分: 通过经纬度坐标传入多个闭合的边界&#xff1b;将多个边界打包成两张纹理&#xff0c;一张是每个多边形的坐标&#xf…