vue2.0+SVG实现音乐播放圆形进度条组件_vue.js_脚本之家
vue2.0+SVG实现音乐播放圆形进度条组件，传入实时百分比实现圆圈进度动画效果
需求分析：
类似于大多数音乐播放器中等mini播放器控制按钮，显示播放进度，实时更新进度。
progress-circle.vue源码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<`template`>
<`div class="progress-circle"`>
<`svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"`>
<`circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"`/>
<`circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent" :stroke-dasharray="dashArray"`
:stroke-dashoffset`="dashOffset"/>`
</`svg`>
<`slot></slot`>
</`div`>
</`template`>
<`script type="text/ecmascript-6"`>
export default {
props: {
radius: {
type: String,
default: '0.32rem'
},
percent: {
type: Number,
default: 0
}
},
data() {
return {
dashArray: Math.PI * 100
}
},
computed: {
dashOffset() {
return (1 - this.percent) * this.dashArray
}
}
}
</`script`>
<`style scoped lang="stylus" rel="stylesheet/stylus"`>
.progress-circle
position: relative
circle
stroke-width: 0.16rem
transform-origin: center
&.progress-background
transform: scale(0.9)
stroke: rgba(255, 205, 49, 0.5)
&.progress-bar
transform: scale(0.9) rotate(-90deg)
stroke: #ffcd32
</`style`>
本组件没有使用本地资源，可直接只用，在父组件中导入并注册后，调用组件。
父组件DOM结构：
1
2
3
4
5
<`div class="control"`>
<`progress-circle :radius="radius" :percent="percent"`>
<`i @click.stop="togglePlaying"` `class="icon-mini"` `:class="iconMiniPlay"></i>`
</`progress-circle`>
</`div`>
解释：其中中引用的是制作的css图标（播放/暂停按钮），通过iconMiniPlay决定展现是播放按钮还是暂停按钮（本例子只介绍原型进图条组件的开发和使用，因此不多介绍），设置图标的大小务必注意与radius一致，不明白为什么的话建议尝试一下，实践出真知噢。
需要像组件传入的参数：
svg圈圈大小radius以及歌曲播放进度百分比percent，两个数据来源：
解释：
percent通过audio标签的currentTime获取，duration为接口获取的当前歌曲总长度，相除则为当前进度百分比。
radius可根据自身开发时所需规格设置（其他布局、样式之类的也是）
父组件样式（本人使用stylus）：
1
2
3
4
5
6
7
8
9
10
.control
position absolute
top 0.35`rem`
right 1`rem`
color $color-theme-d
.icon-mini
font-size`: 0.64`rem
position`: absolute`
left`: 0`
top`: 0`
最近可以变听歌边开发了。
开发完并运用此组件，设置适当的布局、样式后的效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
- vue组件实现进度条效果
- Vue进度条progressbar组件功能
- 在vue项目中使用Nprogress.js进度条的方法
- vue实现简单loading进度条
- Vue render渲染时间戳转时间,时间转时间戳及渲染进度条效果
- Vue的事件响应式进度条组件实例详解
- vue2.0实现音乐/视频播放进度条组件
- Vue实现带进度条的文件拖动上传功能
- vue 页面加载进度条组件实例
- vue环形进度条组件实例应用
- vue柱状进度条图像的完美实现方案
- vue开发拖拽进度条滑动组件
- Vue使用NProgress进度条的方法
- vue配置nprogress实现页面顶部进度条
如您对本文有所疑义或者对本文内容提供补充建议，请联系小编
，本站会保留修改者版权
undefined
[
学习英语从零开始
[
可视化工具
[
穿墙热成像仪
[
免费永久云主机
[
伯克利音乐学院
[
可视化管理系统
- 智能井盖 深圳南山写字楼 联通物联网卡 怎样使鼻翼缩小
- 运维管理系统 舆情监测平台 网页游戏大全 本田思域..
- 超级笔记本 线路板快速打样 三星小note gtx显卡排行
- 如何编程 舆情分析系统 显卡排名 3d打印手板
- 运维管理软件 开个十元店 Linux 显卡比较
- 1块钱域名 无损音乐 运维管理平台 本田思域r
- 机器学习 铜软连接 智能井盖 深圳南山写字楼
- 联通物联网卡 怎样使鼻翼缩小 运维管理系统
反馈意见：
感谢您的反馈！
您的反馈已记录，我们将努力改善您的浏览体验。
原文链接：https://blog.csdn.net/Fabulous1111/article/details/79070292
微信公众号搜索 “ 脚本之家 ” ，选择关注
程序猿的那些事、送书等活动等着你
Original url: Access
Created at: 2020-03-18 20:23:11
Category: default
Tags: none
未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到
最新评论