Uniapp秋云进度条使用方式

UniApp的秋云进度条是一种用于展示任务进度或者加载状态的UI组件，它通常包含一个滑动的条形以及相关的文字描述。在UniApp中使用秋云进度条，你可以按照以下步骤操作：

1. 引入组件：在Vue文件中，首先需要导入`uni-progress`组件，例如通过`import { uniProgress } from '@/components/common';`。

2. 创建组件实例：在模板部分，添加`<uni-progress>`元素，并设置其属性如进度值、颜色、圆角等：

<template>
  <view class="progress-wrap">
    <uni-progress :value="progressValue" :color="#4B90FF" :radius="radius" />
  </view>
</template>

<script setup>
import { uniProgress } from '@/components/common';

const progressValue = 75; // 进度值范围从0到100
const radius = 10; // 圆角半径可自定义

// 使用组件
const progressElement = ref(uniProgress);
</script>

<style scoped>
.progress-wrap {
  width: 200px;
  height: 20px;
}
</style>

3. 控制进度：如果你想动态更新进度，可以在数据绑定的地方处理事件，比如按钮点击或者请求完成：

<button @click="onButtonClick">开始加载</button>

methods: {
  onButtonClick() {
    this.progressValue = 0; // 初始进度为0
    setTimeout(() => {
      this.progressValue = 100; // 加载完成后进度为100
    }, 2000); // 模拟异步过程
  }
}