vue2.0+SVG實(shí)現(xiàn)音樂播放圓形進(jìn)度條組件
vue2.0+SVG實(shí)現(xiàn)音樂播放圓形進(jìn)度條組件，傳入實(shí)時(shí)百分比實(shí)現(xiàn)圓圈進(jìn)度動(dòng)畫效果
需求分析：
類似于大多數(shù)音樂播放器中等mini播放器控制按鈕，顯示播放進(jìn)度，實(shí)時(shí)更新進(jìn)度。
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)入并注冊(cè)后，調(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圖標(biāo)（播放/暫停按鈕），通過iconMiniPlay決定展現(xiàn)是播放按鈕還是暫停按鈕（本例子只介紹原型進(jìn)圖條組件的開發(fā)和使用，因此不多介紹），設(shè)置圖標(biāo)的大小務(wù)必注意與radius一致，不明白為什么的話建議嘗試一下，實(shí)踐出真知噢。
需要像組件傳入的參數(shù)：
svg圈圈大小radius以及歌曲播放進(jìn)度百分比percent，兩個(gè)數(shù)據(jù)來源：
解釋：
percent通過audio標(biāo)簽的currentTime獲取，duration為接口獲取的當(dāng)前歌曲總長度，相除則為當(dāng)前進(jìn)度百分比。
radius可根據(jù)自身開發(fā)時(shí)所需規(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ā)完并運(yùn)用此組件，設(shè)置適當(dāng)?shù)牟季?、樣式后的效果?br />
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
antd upload上傳組件如何獲取服務(wù)端返回?cái)?shù)據(jù)
這篇文章主要介紹了antd upload上傳組件如何獲取服務(wù)端返回?cái)?shù)據(jù)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
Vue實(shí)現(xiàn)Chrome小恐龍游戲的示例代碼
Google 給 Chrome 瀏覽器加了一個(gè)有趣的彩蛋，本文就詳細(xì)的介紹一下Vue實(shí)現(xiàn)Chrome小恐龍游戲的示例代碼，具有一定的參考價(jià)值，感興趣的可以了解一下2022-04-04
使用echarts點(diǎn)擊按鈕從新渲染圖表并更新數(shù)據(jù)
這篇文章主要介紹了使用echarts點(diǎn)擊按鈕從新渲染圖表并更新數(shù)據(jù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue中注冊(cè)全局組件的三種方式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
本文主要介紹了Element的Message彈窗重復(fù)彈出，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
本文主要介紹了electron最小化托盤設(shè)置，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要給大家介紹了關(guān)于如何使用Vue進(jìn)行文件預(yù)覽與打印功能的相關(guān)資料,這個(gè)功能其實(shí)也是自己學(xué)習(xí)到的,做完也有一段時(shí)間了,一直想記錄總結(jié)一下,需要的朋友可以參考下2023-10-10
Vue組件內(nèi)部實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定的實(shí)例代碼
這篇文章主要介紹了Vue組件內(nèi)部實(shí)現(xiàn)一個(gè)雙向數(shù)據(jù)綁定的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
vue+Vue Router多級(jí)側(cè)導(dǎo)航切換路由(頁面)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue+Vue Router多級(jí)側(cè)導(dǎo)航切換路由(頁面)的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了Vue?如何關(guān)掉響應(yīng)式問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09