当前位置: 首页 > news >正文

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>

相关文章:

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&…...

halcon实现浓淡补正,中间值补正-抽取暗

代码效果 抽取前 中值抽取暗 halcon函数代码 测试图片参数 NoiseCut:16 Gain:1 输入ImagePart NoiseCut Gain *获取直方图 get_domain (ImagePart, Domain) gray_histo_range(Domain,ImagePart,0,255,256, Histo, BinSize) area_center(Domain, NumPixels, Row, Column) …...

太速科技-FMC213V3-基于FMC兼容1.8V IO的Full Camera Link 输入子卡

FMC213V3-基于FMC兼容1.8V IO的Full Camera Link 输入子卡 一、板卡概述 该板卡为了考虑兼容1.8V电平IO&#xff0c;适配Virtex7&#xff0c;Kintex Ultrascale&#xff0c;Virtex ultrasacle FPGA而特制&#xff0c;如果要兼容原来的3.3V 也可以修改硬件参数。板卡支持1路…...

GPU短缺和模型效率的推动

1. 引言 随着全球GPU短缺和云计算成本的不断上升&#xff0c;开发更高效的AI模型成为了当前的焦点。技术如低秩适应&#xff08;LoRA&#xff09;和量化&#xff08;Quantization&#xff09;在优化性能的同时&#xff0c;减少了资源需求。这些技术不仅在当前的AI开发中至关重…...

linux在文件夹中查找文件内容

linux在文件夹中查找文件内容 在Linux中,可以通过以下多个途径,在文件夹中查找文件内容: 1、使用grep命令: grep -r "要查找的内容" /path/to/folder-r参数表示递归地在文件夹及其子文件夹中搜索。/path/to/folder是要搜索的文件夹路径。2、使用ack命令 ack …...

算法:11. 盛最多水的容器

11. 盛最多水的容器 给定一个长度为 n 的整数数组 height 。有 n 条垂线&#xff0c;第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线&#xff0c;使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xff1a;你…...

Hazelcast 分布式缓存 在Seatunnel中的使用

1、背景 最近在调研seatunnel的时候&#xff0c;发现新版的seatunnel提供了一个web服务&#xff0c;可以用于图形化的创建数据同步任务&#xff0c;然后管理任务。这里面有个日志模块&#xff0c;可以查看任务的执行状态。其中有个取读数据条数和同步数据条数。很好奇这个数据…...

分数限制下,选好专业还是选好学校?

目录 分数限制下&#xff0c;选好专业还是选好学校&#xff1f; 方向一&#xff1a;专业解析 1. 专业选择的重要性 2. 不同专业的优势与挑战 3. 个人专业选择经验分享 4. 实际场景下的“专业VS学校”选择方案 方向二&#xff1a;名校效应分析 1. 名校声誉与品牌效应 2…...

软件改为开机自启动

1.按键 win R,输入“shell:startup”命令, 然后就可以打开启动目录了&#xff0c;如下&#xff1a; 2.然后&#xff0c;把要开机启动的程序的图标拖进去即可。 参考&#xff1a;开机启动项如何设置...

集群down机的应急和恢复测试(非重做备机)

1. 集群的两台服务器的状态 实例 正常情况主备 ip 端口 node1 主机 192.168.6.6 9088 node2 备机 192.168.6.7 9088 2. 测试的步骤 down掉node1观察node2的状态在node2未自动切换的时候手动将node2调整为单机状态&#xff0c;模拟紧急使用模拟不紧急时&#xff0…...

【数据库系统概论复习】关系数据库与关系代数笔记

文章目录 基本概念数据库基本概念关系数据结构完整性约束 关系代数关系代数练习课堂练习 语法树 基本概念 数据库基本概念 DB 数据库&#xff0c; 为了存用户的各种数据&#xff0c;我们要建很多关系&#xff08;二维表&#xff09;&#xff0c;所以把相关的关系&#xff08;二…...

赛氪网受邀参加上海闵行区翻译协会年会,共探科技翻译创新之路

在科技飞速发展的时代背景下&#xff0c;翻译行业正面临着前所未有的机遇与挑战。作为连接高校、企业与社会的桥梁&#xff0c;赛氪网在推动翻译创新、促进学术交流方面展现出了独特的魅力。2024年6月9日&#xff0c;在华东师范大学外语学院举办的第十三届上海市闵行区翻译协会…...

项目管理进阶之EVM(挣值管理)

前言 项目管理进阶系列&#xff0c;终于有时间更新啦&#xff01;&#xff01;&#xff01;欢迎持续关注哦~ 上一节博主重点讲了一个环&#xff1a;PDCA&#xff0c;无论各行各业&#xff0c;上到航空航天、下到种地种菜&#xff0c;都离不开对质量的监督和改进。这个环既是一…...

PLSQL、Oracle以及客户端远程连接服务器笔记(仅供参考)

1.PLSQL参考链接&#xff1a; 全网最全最细的PLSQL下载、安装、配置、使用指南、问题解答&#xff0c;相关问题已汇总-CSDN博客文章浏览阅读2.9w次&#xff0c;点赞98次&#xff0c;收藏447次。双击之后&#xff0c;这里选择安装目录&#xff0c;你安装目录选的哪里&#xff0…...

Win快速删除node_modules

在Windows系统上删除 node_modules 文件夹通常是一个缓慢且耗时的过程。这主要是由于几个关键因素导致的&#xff1a; 主要原因 文件数量多且嵌套深&#xff1a; node_modules 文件夹通常包含成千上万的子文件夹和文件。由于其结构复杂&#xff0c;文件和文件夹往往嵌套得非常…...

【机器学习】基于顺序到顺序Transformer机器翻译

引言 1.1 序列到序列模型详解 序列到序列(Seq2Seq)模型是深度学习中处理序列数据转换问题的关键架构。在自然语言处理(NLP)任务中&#xff0c;如机器翻译、文本摘要和聊天机器人等&#xff0c;Seq2Seq模型能够高效地将输入序列转换为期望的输出序列。 模型架构&#xff1a; 编…...

TEA 加密的 Java 实现

import java.nio.ByteBuffer; import java.nio.ByteOrder;public class TeaUtils {private static final int DELTA 0x9E3779B9;private static final int ROUND 32;private static final String KEY "password";/*** 加密字符串&#xff0c;使用 TEA 加密算法*/p…...

鸿蒙开发电话服务:【@ohos.telephony.data (蜂窝数据)】

蜂窝数据 说明&#xff1a; 本模块首批接口从API version 7开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import data from ohos.telephony.data;data.getDefaultCellularDataSlotId getDefaultCellularDataSlotId(callback: Async…...

Maven认识与学习

1. Maven介绍 1.2 初识Maven 1.2.1 什么是Maven Maven是Apache旗下的一个开源项目&#xff0c;是一款用于管理和构建java项目的工具。 官网&#xff1a;Maven – Welcome to Apache Maven Apache 软件基金会&#xff0c;成立于1999年7月&#xff0c;是目前世界上最大的最受…...

“深入探讨Redis主从复制:原理、配置与优化“

目录 # 概念 1. 配置主从同步步骤 1.1 创建文件夹 1.2 复制配置文件 1.3 配置文件关闭 1.4 查看端口号&#xff0c;发现端口号存在 1.5 连接三个端口号 1.6 查看主机运行情况 1.7 让服务器变成&#xff08;主机&#xff09;或&#xff08;从机&#xff09; 1.8 实现效…...

HTML初体验

可参考jd.com官网&#xff0c;ctrlu查看当前页面源代码 找到你的项目&#xff0c;在项目中创建html类型的网页文件 标准的HTML正确书写格式 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title&…...

全局特征提取netvlad的理解

...

【设计模式-12】代理模式的代码实现及使用场景

&emsp&#xff1b;代理模式是一种应用很广发的结构性设计模式&#xff0c;它的设计初衷就是通过引入新的代理对象&#xff0c;在客户端和目标对象之间起到中介的作用&#xff0c;从而实现控制客户端对目标对象的访问&#xff0c;比如增强或者阉割某些能力。 1. 概述 代理模…...

网工内推 | 神州数码、弧聚科技网工,IE认证优先,最高18K

01 神州数码 &#x1f537;招聘岗位&#xff1a;高级网络工程师 &#x1f537;岗位职责&#xff1a; 1)提供7*24小时一线运维技术服务&#xff0c;如因应急故障处理应15分钟内到达现场。 2)提供设备的告警信息的分析处理及与故障问题定位服务。 3)完成数据中心网络和HPC超算…...

【Linux】模拟实现一个简单的日志系统

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在学习c和算法 ✈️专栏&#xff1a;Linux &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章对…...

MongoDB 多层级查询

多层级查询 注意&#xff1a;要注意代码顺序 查询层级数据代码放前面&#xff0c;查询条件放后面 if (StringUtils.isBlank(params.getDocType())) {params.setDocType(DOC_TDCTYPE);}String docName mapper.findByDocInfo(params.getDocType());List<ExpertApprovalOpin…...

grpc代理服务的实现(一)

最近公司需要无感知基于服务代号来实现通信, 并监控和管理通信连接&#xff0c;目前公司使用的是如下的逻辑(当然逻辑简化了&#xff0c;但是思想不变) 目录 简单的原理图代理服务的实现创建 tls tcp 服务, 用于grpc client 和 grpc service 通信保存 与 代理服务建立的 grpc …...

FastAPI系列 4 -路由管理APIRouter

FastAPI系列 -路由管理APIRouter 文章目录 FastAPI系列 -路由管理APIRouter一、前言二、APIRouter使用示例1、功能拆分2、users、books模块开发3、FastAPI主体 三、运行结果 一、前言 未来的py开发者请上座&#xff0c;在使用python做为后端开发一个应用程序或 Web API&#x…...

数据驱动制造:EMQX ECP 指标监测功能增强生产透明度

迈向未来的工业生产&#xff0c;需要的不仅是自动化&#xff0c;更是智能化。如果工业企业的管理者能够实时监测每一生产环节的设备运行状态&#xff0c;每一数据点位情况&#xff0c;洞察和优化每一步生产流程&#xff0c;他们将能够做出更精准的决策&#xff0c;提高生产效率…...

一行代码实现鼠标横向滚动

&#x1f9d1;‍&#x1f4bb; 写在开头 点赞 收藏 学会&#x1f923;&#x1f923;&#x1f923; 在项目中我们可能会遇到当鼠标在某个区域内&#xff0c;我们希望滚动鼠标里面的内容可以横向滚动&#xff1b; 比如我们一些常见的后台状态栏&#xff1a; 那这种该怎么写&…...

网站突然显示 建设中/微信营销软件哪个好用

m_Orchestrate learning system---十二、为什么thinkphp验证场景里面的多个属性之间是逗号一、总结一句话总结&#xff1a;因为是数组啊1 protected $scene [2 edit > [name,age],3 ];1、原生js如何获取html内容&#xff1f;1 2 functioncheck(){3 varrepassworddocument.g…...

python做网站实例/cms

在虚拟机与虚拟机、虚拟机与实机之间利用Windows操作系统自带的网络负载均衡功能如选择单播集群模式&#xff0c;网络就无法通讯&#xff0c;NLB不成功。 Scenario #1 在虚拟机与虚拟机之间选择多播模式NLB可正常工作&#xff0c;而虚拟机与实机之间无法选择多播模式&#xff0…...

打电话推销好还是做网站推广好/搜索引擎快速优化排名

理由&#xff1a; 因为long类型是 System.Int64 (长整型&#xff0c;占 8 字节&#xff0c;表示 64 位整数&#xff0c;范围大约 -(10 的 19) 次方 到 10 的 19 次方) 而long BinaryReader.ReadInt64()方法是从当前流中读取八字节有符号整数&#xff0c;并使流的当前位置向前移…...

合肥网站建设是什么意思/全媒体广告代理加盟

Shiro基础身份验证 如果要进行shiro的日志信息读取&#xff0c;那么需要使用一个org.apache.shiro.util.Factory接口&#xff0c;在这个接口里面定义有一 取得SecuruityManager接口对象的方法&#xff1a;public T getInstance()&#xff1b; Factory是接口&#xff0c;本次将通…...

wordpress 后台 java/微信软文案例

最新BAT大厂面试者整理的Android面试题目&#xff01; 近期根据网友分享大厂面试题目&#xff0c;今天我将网友面试的BAT等大厂Android面试题目整理出来&#xff0c;希望能够帮助大家&#xff01; 一、Android基础 Android基础知识点比较多&#xff0c;看图。 建议阅读&…...

易联网站建设/小吴seo博客

参考博客&#xff1a;基于python的七种经典排序算法 常用排序算法总结(一) 堆排序 堆排序前传 - 树与二叉树 树是一种很常见的非线性的数据结构&#xff0c;称为树形结构&#xff0c;简称树。所谓数据结构就是一组数据的集合连同它们的储存关系和对它们的操作方法。树形结构…...