如何在UniApp中正确地使用<zui-progress-circle>组件？

在UniApp中，`<zui-progress-circle>`是一个用于创建圆形进度条的UI组件。要正确地使用它，可以按照以下步骤操作：

1. **引入组件**: 首先，在需要使用进度条的页面或者组件文件（如.vue）中，通过`import`语句引入`zui-progress-circle`组件：

   <template>
     <import src="uni_modules/zui/components/progress-circle/index.vue" />
   </template>

2. **添加组件**: 然后在模板部分，你可以直接插入`<zui-progress-circle>`元素，并设置属性来配置其外观和行为：

   <zui-progress-circle :value="progressValue" :percent="progressPercent" @change="handleProgressChange"></zui-progress-circle>

- `value`: 进度条的当前值，通常介于0到100之间。
- `percent`: 相对于最大值的百分比表示。
- `@change`: 触发当进度发生变化时，这是一个自定义事件，可以处理回调函数。

3. **绑定数据**: 将进度值绑定到Vue实例的数据上，比如`data() { return { progressValue: 50, progressPercent: 50 } }`。

4. **更新状态**: 当你需要改变进度条的状态时，只需要更新相应的数据属性即可。例如，`this.progressValue = 75;`.

5. **样式定制**: 如果需要调整圆圈的颜色、大小等样式，可以在CSS中修改`zui-progress-circle`类的样式。

.zui-progress-circle {
  width: 100px; /* 根据需求调整宽度 */
  height: 100px;
  background-color: #ccc; /* 圆环背景色 */
}