vue2.0+SVG實現(xiàn)音樂播放圓形進度條組件
vue2.0+SVG實現(xiàn)音樂播放圓形進度條組件，傳入實時百分比實現(xiàn)圓圈進度動畫效果
需求分析：
類似于大多數(shù)音樂播放器中等mini播放器控制按鈕，顯示播放進度，實時更新進度。
progress-circle.vue源碼：
<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>
本組件沒有使用本地資源，可直接只用，在父組件中導(dǎo)入并注冊后，調(diào)用組件。
父組件DOM結(jié)構(gòu)：
<div class="control"> <progress-circle :radius="radius" :percent="percent"> <i @click.stop="togglePlaying" class="icon-mini" :class="iconMiniPlay"></i> </progress-circle> </div>
解釋：其中<i></i>中引用的是制作的css圖標（播放/暫停按鈕），通過iconMiniPlay決定展現(xiàn)是播放按鈕還是暫停按鈕（本例子只介紹原型進圖條組件的開發(fā)和使用，因此不多介紹），設(shè)置圖標的大小務(wù)必注意與radius一致，不明白為什么的話建議嘗試一下，實踐出真知噢。
需要像組件傳入的參數(shù)：
svg圈圈大小radius以及歌曲播放進度百分比percent，兩個數(shù)據(jù)來源：
解釋：
percent通過audio標簽的currentTime獲取，duration為接口獲取的當前歌曲總長度，相除則為當前進度百分比。
radius可根據(jù)自身開發(fā)時所需規(guī)格設(shè)置（其他布局、樣式之類的也是）
父組件樣式（本人使用stylus）：
.control position absolute top 0.35rem right 1rem color $color-theme-d .icon-mini font-size: 0.64rem position: absolute left: 0 top: 0
最近可以變聽歌邊開發(fā)了。
開發(fā)完并運用此組件，設(shè)置適當?shù)牟季?、樣式后的效果?br />
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 使用beforeEach實現(xiàn)登錄狀態(tài)檢查功能
今天小編就為大家分享一篇Vue 使用beforeEach實現(xiàn)登錄狀態(tài)檢查功能，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue項目實現(xiàn)點擊目標區(qū)域之外可關(guān)閉(隱藏)目標區(qū)域
這篇文章主要介紹了vue項目實現(xiàn)點擊目標區(qū)域之外可關(guān)閉(隱藏)目標區(qū)域，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue.js 是一個流行的前端JavaScript框架,用于構(gòu)建用戶界面,在這個"vue網(wǎng)頁登錄界面"的示例中,我們探討的是如何使用Vue.js創(chuàng)建一個簡單的登錄頁面,感興趣的小伙伴跟著小編一起來看看吧2025-04-04
下面小編就為大家分享一篇在vue組件中使用axios的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
setup函數(shù)是一個新的組件選項,作為在組件內(nèi)使用Composition Api的入口點,下面這篇文章主要給大家介紹了關(guān)于vue3.0中setup的兩種用法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
本篇文章主要介紹了詳解vue組件通信的三種方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
vue項目使用typescript創(chuàng)建抽象類及其使用方式
這篇文章主要介紹了vue項目使用typescript創(chuàng)建抽象類及其使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家介紹了input組合事件如何監(jiān)聽輸入中文示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
elementui源碼學(xué)習(xí)仿寫el-collapse示例
這篇文章主要為大家介紹了elementui源碼學(xué)習(xí)之仿寫el-collapse示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
今天小編就為大家分享一篇Vue通過ref父子組件拿值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09