更新记录

0.0.1（2025-11-11） 下载此版本

CirclePercent 圆形进度条组件

简介

CirclePercent 是一个基于 canvas 绘制的圆形进度条组件，适用于展示百分比数据，如任务完成度、评分等场景。该组件支持自定义尺寸、颜色、线宽和圆弧角度，使用灵活便捷。

功能特性

• 支持自定义进度百分比显示
• 可调整圆的尺寸大小
• 可自定义进度颜色和背景颜色
• 支持调整线宽
• 可设置圆弧角度（全圆、半圆、三分之一圆等）
• 自动响应数据变化

组件使用

引入组件

<template>
  <view>
    <CirclePercent 
      :percent="60" 
      :size="120" 
      :lineWidth="8" 
      color="#ff7b00" 
    />
  </view>
</template>

<script>
  import CirclePercent from '@/components/circle-percent/circle-percent.vue'

  export default {
    components: {
      CirclePercent
    }
  }
</script>

属性说明

示例

基本用法

<CirclePercent :percent="75" />

自定义颜色和尺寸

<CirclePercent 
  :percent="85" 
  :size="150" 
  :lineWidth="10" 
  color="#4caf50" 
  backgroundColor="#e0e0e0" 
/>

半圆进度条

<CirclePercent 
  :percent="60" 
  :angle="180" 
  color="#2196f3" 
/>

动态更新进度

<template>
  <view>
    <CirclePercent :percent="progress" />
    <button @click="increaseProgress">增加进度</button>
  </view>
</template>

<script>
  import CirclePercent from '@/components/circle-percent/circle-percent.vue'

  export default {
    components: {
      CirclePercent
    },
    data() {
      return {
        progress: 30
      }
    },
    methods: {
      increaseProgress() {
        this.progress = Math.min(100, this.progress + 10)
      }
    }
  }
</script>

注意事项

• 组件会自动响应 percent 和 angle 属性的变化并重新绘制
• 多个组件实例同时使用时，请确保为每个组件设置不同的 canvasId
• 组件内部使用了 uni-app 的 createCanvasContext API，确保在支持 canvas 的环境中使用

平台兼容性

uni-app(3.7.12)

其他

qs-circle-percent 圆形进度条组件

简介

qs-circle-percent 是一个基于 canvas 绘制的圆形进度条组件，适用于展示百分比数据，如任务完成度、评分等场景。该组件支持自定义尺寸、颜色、线宽和圆弧角度，使用灵活便捷。

功能特性

• 支持自定义进度百分比显示
• 可调整圆的尺寸大小
• 可自定义进度颜色和背景颜色
• 支持调整线宽
• 可设置圆弧角度（全圆、半圆、三分之一圆等）
• 自动响应数据变化

组件使用

引入组件

<template>
  <view>
    <qs-circle-percent 
      :percent="60" 
      :size="120" 
      :lineWidth="8" 
      color="#ff7b00" 
    />
  </view>
</template>

<script>
  import qsCirclePercent from '@/components/qs-circle-percent/qs-circle-percent.vue'

  export default {
    components: {
      qsCirclePercent
    }
  }
</script>

属性说明

示例

基本用法

<qs-circle-percent :percent="75" />

自定义颜色和尺寸

<qs-circle-percent 
  :percent="85" 
  :size="150" 
  :lineWidth="10" 
  color="#4caf50" 
  backgroundColor="#e0e0e0" 
/>

半圆进度条

<qs-circle-percent 
  :percent="60" 
  :angle="180" 
  color="#2196f3" 
/>

动态更新进度

<template>
  <view>
    <qs-circle-percent :percent="progress" />
    <button @click="increaseProgress">增加进度</button>
  </view>
</template>

<script>
  import qsCirclePercent from '@/components/qs-circle-percent/qs-circle-percent.vue'

  export default {
    components: {
      qsCirclePercent
    },
    data() {
      return {
        progress: 30
      }
    },
    methods: {
      increaseProgress() {
        this.progress = Math.min(100, this.progress + 10)
      }
    }
  }
</script>

注意事项

• 组件会自动响应 percent 和 angle 属性的变化并重新绘制
• 多个组件实例同时使用时，请确保为每个组件设置不同的 canvasId
• 组件内部使用了 uni-app 的 createCanvasContext API，确保在支持 canvas 的环境中使用