vue封装环形进度条组件

仿照elementui封装了一个环形进度条组件

//progress.vue
<template>
  <div>
    <canvas width="130" height="130" ref="canvas"></canvas>
  </div>
</template>
<script>
export default {
  props: { progress: { type: String } },//接收进度
  mounted() {
    var ctx = this.$refs.canvas.getContext("2d");
    ctx.beginPath();
    var x = (this.progress / 100) * Math.PI * 2;
    console.log(Math.PI / x);

    ctx.arc(65, 65, 60, 0, 2 * Math.PI, false);
    //不同的进度使用不同颜色绘制
    if (x <= 2) {
      ctx.strokeStyle = "rgb(32,160,255)";
    }
    if (x > 2 && x <= 4) {
      ctx.strokeStyle = "rgb(255,73,73)";
    }
    if (x > 4 && x <= 6) {
      ctx.strokeStyle = "rgb(230,162,60)";
    }
    if (x > 6) {
      ctx.strokeStyle = "rgb(19,206,102)";
    }
    ctx.lineWidth = 5;
    ctx.stroke();
    ctx.closePath();
    ctx.beginPath();

    ctx.arc(65, 65, 60, -Math.PI / 2, -Math.PI / 2 + x, true);
    ctx.strokeStyle = "rgb(229,233,242)";

    ctx.lineWidth = 5;
    ctx.stroke();
  }
};
</script>
<style scoped>
div {
  width: 150px;
  height: 150px;
}
canvas {
  margin: 10px auto;
}
</style>

然后注册即可使用

//index.js
import progress from'./progress.vue'

const Progress={
    install:function(Vue){
        Vue.component('Progress',progress)
    }
}
export default Progress;

//main.js
import Progress from './index.js'
Vue.use(Progress)