怎么在vue2.0中使用SVG實現(xiàn)音樂播放圓形進度條組件-創(chuàng)新互聯(lián)
這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)怎么在vue2.0中使用SVG實現(xiàn)音樂播放圓形進度條組件，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
站在用戶的角度思考問題，與客戶深入溝通，找到沿灘網(wǎng)站設計與沿灘網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗，讓設計與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：
成都網(wǎng)站建設、成都網(wǎng)站設計、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣、
域名申請、虛擬空間、企業(yè)郵箱。業(yè)務覆蓋沿灘地區(qū)。
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
本組件沒有使用本地資源，可直接只用，在父組件中導入并注冊后，調(diào)用組件。
父組件DOM結(jié)構(gòu)：
解釋：其中中引用的是制作的css圖標（播放/暫停按鈕），通過iconMiniPlay決定展現(xiàn)是播放按鈕還是暫停按鈕（本例子只介紹原型進圖條組件的開發(fā)和使用，因此不多介紹），設置圖標的大小務必注意與radius一致，不明白為什么的話建議嘗試一下，實踐出真知噢。
需要像組件傳入的參數(shù)：
svg圈圈大小radius以及歌曲播放進度百分比percent，兩個數(shù)據(jù)來源：
解釋：
percent通過audio標簽的currentTime獲取，duration為接口獲取的當前歌曲總長度，相除則為當前進度百分比。
radius可根據(jù)自身開發(fā)時所需規(guī)格設置（其他布局、樣式之類的也是）
父組件樣式（本人使用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實現(xiàn)音樂播放圓形進度條組件了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站題目：怎么在vue2.0中使用SVG實現(xiàn)音樂播放圓形進度條組件-創(chuàng)新互聯(lián)
標題URL：
http://weahome.cn/article/dpjsed.html
重慶分公司
重慶分公司
