由于工作项目的需要,需要使用到歌曲播放,参考多方资料,写了一个仿网易云音乐播放界面,能完整的实现音乐播放功能。 前端简单的使用vue组件和audio标签实现了播放器界面,后端则是调用网易云的API获取对应的歌曲信息。 废话不多说上代码歌曲播放界面(musicPlay.vue)<template> <div class="main-page">
转载 8月前
124阅读
Vue-mmPlayer:一款高效易用的Vue音乐播放器组件项目地址:https://gitcode.com/maomao1996/Vue-mmPlayerVue-mmPlayer 是一个基于Vue.js开发的轻量级音乐播放器组件,专为Web开发者设计,旨在帮助他们轻松地在项目中集成音乐播放功能。该项目以简洁、灵活和高度可定制性为核心,提供丰富的API和事件,使得在各种应用场景中都能游刃有余。技术
转载 2024-08-09 10:49:49
229阅读
前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记。项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star。歌曲列表歌曲播放一、子路由配置以及转场动画实现components->singer-detail目录下:创建singer-detai.vueroute->index.js中:引入并配置Singer子路由SingerDe
转载 2024-05-16 17:19:13
61阅读
今天,我们来实现播放器首页的 排行榜页面 的开发,也就是 src\components\Rank.vue ,效果截图:  主要分析要点:1、Vuex模块化2、CSS屏幕自适应——@media screen3、overflow CSS处理文本溢出4、absolute 绝对定位 页面的图片、排行榜名称、歌曲等信息,来自QQ音乐的数据接口,我们用 vue-resource
转载 2024-03-28 15:45:36
194阅读
一个具有强大功能的 vuepress 主题仓库✨在vuepress或者vdoing主题项目中,其实已经内置了一些第三方插件,比如百度统计,第三方搜索,代码块一件复制,评论区等等。想看用了什么插件,看package.json就可以。以下是我的安装的一些依赖"devDependencies": { "dayjs": "^1.9.7", "inquirer": "^7.1.0",
前言其中在想在博客中添加音乐播放功能的时候,也考虑也其它音乐播放器插件如APlayer,页面和功能都能满足要求。而且播放页面也很好看,功能几乎都有。但是我不需要那么多功能,所以我自己尝试制作一个属于自己博客的音乐播放器。页面布局及样式参考APlayer案例预览(点击预览云墨白-音乐播放器)<style> .isshow { left: -66px !important;
转载 2024-09-19 15:31:31
117阅读
技术栈vuevuexvue-router(子路由)需求分析1)歌手列表点击歌手会跳转到下级页面歌手详情页,歌手详情页由四个部分组成歌手图片返回按钮:点击返回歌手tab页随机播放按钮歌手歌曲滚动 2)歌曲栏向上滚动到顶部时,图片和播放按钮随之隐藏,保留歌手名和返回按钮3)歌曲栏向下拖动时,歌手图片的高度作出无缝增高新的组件singer-detail.vuemusic-list.vuesong-lis
一、UI组件及框架element - 饿了么出品的Vue2的web UI工具套件mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式
转载 8月前
24阅读
1. 音乐播放前进后退的实现   2. 音乐进度条实现(单独一个组件) 思想: a. 播放进度条样式  定义高但是不定义宽度。 父组件computed: 当音乐不断变化的时候 它与总时间有个不断变化的百分比子组件接收的时候 watch它的变化 不断去修改progress和小球的宽度b. 实现拖动效果给progress-bar定义触摸事件 
推荐一款高效VuePress主题:OneN vuepress-theme-oneN? A vuepress theme for oneN 项目地址:https://gitcode.com/gh_mirrors/vu/vuepress-theme-oneN ,这款主题将为你的 VuePress 网站带来更具现代感和专业感的外观。项目简介OneN 主题是 VuePress 社区的一个优秀贡献,它的目标
开发VUE插件详细步骤一.前置知识1.混入2.render函数3.使用代码注册组件4.extend二、开发插件1.插件使用例子2.插件开发开发插件使用插件分析修改插件,丰富插件功能调用方法如果对您有帮助,就点个赞吧!!欢迎留言评论@_@ 一.前置知识1.混入基本示例: 示例文件结构: 新建一个.js文件,里面定义属性,这里面的属性就是vue的属性,在vue文件中引入这个文件中的属性时也会混合到v
转载 2024-09-09 22:35:05
74阅读
1.插件的分类1.添加全局方法或属性,如 vue-element 2.添加全局资源: 指令/过滤器/过渡等,如 vue-touch 3.通过全局mixin方法添加一些组件选项,如 vuex 4.添加Vue实例方法,通过把它们添加到 Vue.prototype 上实现vue插件的编写方法一般分为4类,主要注册和绑定机制如下:export default { install(Vue, opti
一、为什么要自己动手写插件呢,原因有二:  其一:是因为最近产品了提了一个在web端接收,消息通知的需求,产品要求在若干个页面内如果有消息,就要弹出消息弹窗展示给用户,略加思索之后,第一反应就是写个消息的组件,在需要的页面引入,不过写好之后,发现这样写好麻烦,是不是可以写个插件在全局一次性引入呢?  其二:纯粹的想学习一下vue的插件是如何开发的二、既然有想法了,那就开始写呗,先去查看了vue的官
一文读懂Vue插件使用插件使用插件Vue.use()开发插件Vue项目中应用配合require.context,动态导入全局组件Vue项目中引入elementUi组件(全局)推荐阅读 插件插件通常用来为 Vue 添加全局功能。插件的功能范围没有严格的限制——一般有下面几种:添加全局方法或者 property。如:vue-custom-element添加全局资源:指令/过滤器/过渡等。如 vue-t
转载 2024-08-28 13:46:14
93阅读
问题最近在使用vuepress-theme-reco构建属于自己的博客,感兴趣的同学可以自己去官网上构建自己的博客。 在使用这个框架构建博客的时候,发现了一个及其令人头疼的问题——中文标签返回404,具体的表现形式:解决办法很快的啊,我找到了issue,里面的大佬已经给了对应的解释和解决办法。问题原因:浏览器对直接输入的中文url做了一次encode导致 匹配不到对应的path,然后就打到了404
转载 2024-06-19 08:55:08
106阅读
介绍在之前为了搭建 VuePress 的文档,顺带制作了视频教程,如今准备再次搭建一个 VuePress 的项目,一看自己的视频竟然有五个小时,天呐,我只是需要过一遍而已,所以重新整理成文档吧,万一将来又要用呢……当然,如果您觉得文字版不够直观,可以前往观看视频版: 【 ,当时录制完本地测试后觉得声音大小还可以,结果一套录完了才发现声音很小,所以推荐带上耳机。VuePress 文档示例插件列表为了
vuepress编写API文档介绍搭建安装初始化配置组件API文档发布组件库坑没有高亮 介绍想要搭建一个类似elementUI的组件库及相关的API文档,可以直接引用组件,还有代码展示,这里使用vuepress来搭建。详细配置可以前往vuepress官网查看。搭建安装全局安装vuepress npm i vuepress -g新建项目mkdir my_vuepress初始化进入项目cd my_v
前言 博客上的音乐播放器,大多都长一个样,小小的,塞在页面的一个角落里,在别人阅读文章的同时可以听音乐,增加某些体验的满意指数。而我,做了一件不太一样的事情: 博客不就是让人看文章的么?再播放音乐甚至
原创 2022-04-12 15:14:52
952阅读
1点赞
前言作为一个常年的B端前端开发者来说,千篇一律的业务开发有着些许的枯燥无味。在联调过程中,会经常发现后端在部署服务,然后又不知什么时候部署好,由于公司的部署系统查看系统部署状态入口较深,所以闲暇之余,研究了一下Chrome插件开发。因此从今天起,我们进行Chrome插件的开发学习。通过下拉框可以快速的切换不同项目的前后端部署状态,先看一下成果:1. 什么是Chrome插件谷歌浏览器插件是一种小型的
转载 2024-08-23 10:55:33
41阅读
Vue 被一个健康的插件和包的生态系统所加强,使开发变得可靠、快速和简单。由于Vue 是一个国际开发者社区所选择的框架,所以有一个不断增长的插件和包库,你可以在项目中使用。本文列举了用于Vue 2和Vue 3的 15个 流行的 Vue 插件。VuetifyNuxtJSVuexVuex Persisted StateVuePressVue MetaVue ChartJSVue Grid Layout
  • 1
  • 2
  • 3
  • 4
  • 5