修改el-propgress源码 自定义内容以及样式

饿了么的el-proggress组件虽然可以使用format自定义里面内容，但是里面的文字不能换行后不能单独改变,于是就有了修改源码想法。接上次更新加一个圆环动画以及数字动画效果

效果图：

<template>

  <div class="el-progress el-progress--circle">

    <div class="el-progress-circle"

         :style="{height: width+'px', width:width+'px'}">

        <!-- 修改el-propgress源码 自定义内容 -->

      <svg viewBox="0 0 100 100">

 

        <!--

          第1个path是灰色的背景环形

          stroke-width： 进度条的宽细

          stroke：颜色

        -->

        <path d="

        M 50 50

        m 0 -46

        a 46 46 0 1 1 0 92

        a 46 46 0 1 1 0 -92

        "

              stroke="#e5e9f2"

              stroke-width="7.7"

              fill="none"

              class="el-progress-circle__track"

              style="stroke-dasharray: 295.31px, 295.31px; stroke-dashoffset: 0px;"></path>

        <!--

          第1个path是灰色的背景环形

          stroke-width： 进度条的宽细

          stroke：颜色

        -->

        <path d="

          M 50 50

        m 0 -46

        a 46 46 0 1 1 0 92

        a 46 46 0 1 1 0 -92

        "

              :stroke="color"

              fill="none"

              stroke-linecap="round"

              stroke-width="7.7"

              class="el-progress-circle__path"

              :style="`stroke-dasharray: ${calcProgress()}px, 295.31px; stroke-dashoffset: 0px; transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;`"></path>

      </svg>

    </div>

       <div class="el-progress__text"

         >

   <count-to :startVal="0"

                  :endVal="Number(percentage)"

                  :duration="animationTime"

                  :decimals="2"></count-to>

      <i class="fa fa-percent"

         aria-hidden="true"></i>

      <br />

      <span class="abstract">{{ abstract }}</span>

      <!-- <span class="abstract-unit">单</span> -->

    </div>

  </div>

</template>

<script>

import countTo from 'vue-count-to'

export default {

  name: 'NewProgress',

  props: {

    //百分比

    percentage: {

      type: String,

      default: '-',

    },

//圆环宽度

    width:{

type: Number,

 default: 156,

    },

//圆环粗细

    strokeWidth:{

type: Number,

      default: 12,

    },

    //内容

    abstract: {

      type: String,

      default: '-',

    },

//圆环颜色  

 color:{

     type: String,

      default: '',

   },

//动画时间

 animationTime:{

       type: Number,

      default: 2000,

    }

 

  },

  data() {

    return {

 angle: 0,

      time: 0,

    }

  },

  methods: {

    calcProgress() {

      return this.percentage * 2.9531

    },

  },

  mounted() {

    let b = setInterval(() => {

      this.time++

      this.angle = (Number(this.percentage) / (this.animationTime/1000)) * this.time

      if (this.time == 2) {

        clearInterval(b)

      }

    }, 1000)

  },

}

</script>

<style scoped>

.percentage {

  font-size: 32px;

  font-weight: bold;

  color: #666666;

}

.abstract {

  font-size: 16px;

  font-family: Source Han Sans CN;

  font-weight: 400;

  line-height: 27px;

  color: #666666;

  opacity: 1;

}

.abstract-unit {

  font-size: 20px;

}

</style>

使用方法：