圆形进度条

子组件

<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 >
  export default {
    props: {
      //圆形进度条显示的宽高
      radius: {
        type: Number,
        default: 100
      },
      //歌曲播放比例
      percent: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        //周长
        dashArray: Math.PI * 100
      }
    },
    computed: {
      //圆形偏移量,数值类型,为0则表示歌曲播放完毕
      dashOffset() {
        return (1 - this.percent) * this.dashArray
      }
    }
  }
</script>

<style scoped lang="stylus" >

  .progress-circle
    position: relative
    circle
      stroke-width: 8px
      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>

父组件

        <!-- 圆形进度条 -->
        <div class="control">
          <progress-circle :radius="radius" :percent="percent">
            <i  class="icon-mini" ></i>
          </progress-circle>
        </div>

  //音乐播放环形进度条
  import ProgressCircle from '@/common/progress-circle/progress-circle'

    data() {
      return {
         radius: 32,       //圆形进度条的宽高
        percent: 0       //歌曲播放比例： 已播放时间 / 总时长
      }
    },    

<style scoped lang="stylus" >
        .icon-mini
          font-size: 32px
          position: absolute //绝对定位，保证圆形进度条套在插槽图标之内
          left: 0
          top: 0
</style>