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