怎么在vue2.0中使用SVG實(shí)現(xiàn)音樂播放圓形進(jìn)度條組件
這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)怎么在vue2.0中使用SVG實(shí)現(xiàn)音樂播放圓形進(jìn)度條組件，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
專注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站制作服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)平遙免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了成百上千家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
progress-circle.vue源碼：
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
}
}
}
.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
本組件沒有使用本地資源，可直接只用，在父組件中導(dǎo)入并注冊后，調(diào)用組件。
父組件DOM結(jié)構(gòu)：
解釋：其中中引用的是制作的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
上述就是小編為大家分享的怎么在vue2.0中使用SVG實(shí)現(xiàn)音樂播放圓形進(jìn)度條組件了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
分享標(biāo)題：怎么在vue2.0中使用SVG實(shí)現(xiàn)音樂播放圓形進(jìn)度條組件
瀏覽地址：
http://weahome.cn/article/jeojhj.html
重慶分公司
重慶分公司
