VUE移动端音乐APP学习【十四】：播放器progress-circle 圆形进度条组件实现

给迷你播放器实现一个圆形进度条。圆形进度条主要是在圆上有个渐变的圈，颜色高亮

圆形进度条dom结构：

<template>
  <div class="progress-circle">
    <svg width="32" height="32" 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*="100" />
  svg>
  <slot>slot>
 div>
template>

在player应用这个组件：

<div class="control">
     <progress-circle>
          <i @click.stop="togglePlaying" class="iconfont icon-play-mini" :class=" miniIcon">i>
    progress-circle>
div>

可以看到icon没有被circle包裹在里面，因为circle是相对定位的，需要给icon加个绝对定位

<i @click.stop="togglePlaying" class="iconfont icon-play-mini icon-mini" :class=" miniIcon">i>

.icon-mini {
          font-size: 32px;
          position: absolute;
          left: 0;
          top: 0;
        }

优化：在圆形进度条组件中可以看到svg包裹2个circle，viewbox表示的是视口的宽度和位置0 0 100 100表示的是从左上角(0,0)一直拉到(100,100)的区域，height和width是svg真正显示在屏幕上的大小。宽度和高度可以设置成props，从外部传入接收数据来控制svg的大小，加强组件的通用性。

这里不写死它的宽度高度，在调用这个组件的时候给它传递一个半径

  props: {
    radius: {
      type: Number,
      default: 100,
    },

player.vue

<progress-circle radius="32">

在circle标签中，stroke-dasharray 表示描边以及描边距离，通常还会有一个stroke-dashoffset ，它表示描边的偏移；它两可以做一个搭配配合，可以用来表示歌曲的进度百分比，也就是这个percent要映射到这个stroke-dashoffset上

如何实现？

①首先获取这个stroke-dasharray

<circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent" :stroke-dasharray="dashArray"/>

 data() {
    return {
      dashArray: Math.PI * 100,
    };
  },

②接收percent 使用计算属性做映射到stroke-dashoffset上

<circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent" :stroke-dasharray="dashArray"  :stroke-dashoffset="dashOffset" />

computed: {
    dashOffset() {
      return (1 - this.percent) * this.dashArray;
    },
  },

③在player.vue传入percent给组件

<progress-circle radius="32" :percent="percent">

运行后看到有个报错：

props接收的radius是个Number，但是因为传递的固定值32会被转换成String类型，所以还是得用一个变量表示

<progress-circle :radius="radius" :percent="percent">

data() {
    return {
      songReady: false,
      currentTime: 0,
      radius: 32,
    };
  },

运行结果： 圆形进度条组件成功实现