圆形进度加载环

最新推荐文章于 2023-12-05 09:34:12 发布

frewtyh

最新推荐文章于 2023-12-05 09:34:12 发布

阅读量105

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/frewtyh/article/details/132695740

版权

文章描述了一种使用Vue编写的圆形进度加载组件，通过CanvasAPI在UI中动态绘制，以及如何在模板中传参和样式控制。组件接受percent和progressColor作为属性，展示了如何在实际场景中使用这个组件来显示进度和状态信息。

摘要由CSDN通过智能技术生成

1.Ui设计了个圆形进度加载环，这边采用cnavas制作

2.封装一个组件progress-circle

<template>
  <div>
    <canvas :canvas-id="'progress'+id" :style="{width: size + 'rpx', height: size + 'rpx'}"></canvas>
//中间需要添加的内容
    <slot></slot>
  </div>
</template>
  
  <script>
export default {
  props: ["id",  "percent","progressColor"],
  data() {
    return {
      sizeNum: this.size, //最终的整体尺寸
      strokeWidthNum: this.strokeWidth , //最终的轨道宽度数值,
      bgColor:'#F0F3FA',
      size:125,
      strokeWidth:10,
    };
  },
  mounted() {
    this.drawProgress();
  },
  methods: {
    drawProgress() {
      //尺寸与轨道宽度自适应处理
      const screenWidth = uni.getSystemInfoSync().screenWidth;
      this.sizeNum = (this.size / 750) * screenWidth;
      this.strokeWidthNum = (this.strokeWidth / 750) * screenWidth;

      const ctx = uni.createCanvasContext(`progress${this.id}`, this);
      const centerX = this.sizeNum / 2;
      const centerY = this.sizeNum / 2;
      const radius = (this.sizeNum - this.strokeWidthNum) / 2;
      const startAngle = 1.5 * Math.PI;
      const endAngle = startAngle - (this.percent / 100) * 2 * Math.PI; 
      // 绘制背景圆
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
      ctx.setFillStyle("#FFFFFF");
      ctx.fill();
      // 绘制轨道圆环
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
      ctx.setLineWidth(this.strokeWidthNum);
      ctx.setStrokeStyle(this.bgColor);
      ctx.setLineCap("round");
      ctx.stroke();
      // 绘制进度圆环
      ctx.beginPath();
      ctx.arc(centerX, centerY, radius, startAngle, endAngle,true);
      ctx.setLineWidth(this.strokeWidthNum);
      ctx.setStrokeStyle(this.progressColor);
      ctx.setLineCap("round");
      ctx.stroke();
      ctx.draw(true);
    }
  },
  watch: {
    percent() {
      this.drawProgress();
    }
  }
};
</script>

3.将该组件使用到对应位置，这样子就能展现出想要的效果了

 <progressCircle :percent="percent" :progressColor="getStatus.col" :id="itemInfo.id">
         <div class="content">
            <p class="txt" :style="{color: getStatus.col}">{{getStatus.txt}}</p>
            <p
              class="num"
              v-if="itemInfo.state == 2"
            >{{ itemInfo.alreadyAmount }}/{{ itemInfo.amount }}</p>
          </div>
        </progressCircle>