欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue2.0+SVG實(shí)現(xiàn)音樂播放圓形進(jìn)度條組件

 更新時(shí)間：2019年09月21日 16:26:45   作者：ECMAScripter  
這篇文章主要為大家詳細(xì)介紹了Vue2.0+SVG實(shí)現(xiàn)音樂播放圓形進(jìn)度條組件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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)入并注冊后，調(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論