Circle 环形进度条

引入

通过以下方式来全局注册组件，更多注册方式请参考。

基础用法

属性表示进度条的目标进度，v-model:current-rate 表示动画过程中的实时进度。当 rate 发生变化时，v-model:current-rate 会以 speed 的速度变化，直至达到 rate 设定的值。

  1. <van-circle
  2.   v-model:current-rate="currentRate"
  3.   :rate="30"
  4.   :text="text"
  5. />
  1. import { ref, computed } from 'vue';
  3. export default {
  4.   setup() {
  5.     const currentRate = ref(0);
  6.     const text = computed(() => currentRate.value.toFixed(0) + '%');
  8.     return {
  9.       text,
  10.       currentRate,
  11.     };
  12.   },
  13. };

宽度定制

通过 属性来控制进度条宽度。

  1. <van-circle
  2.   v-model:current-rate="currentRate"
  3.   :rate="rate"
  4.   layer-color="#ebedf0"
  5. />

渐变色

color 属性支持传入对象格式来定义渐变色。

  1. <van-circle
  2.   v-model:current-rate="currentRate"
  3.   :rate="rate"
  4.   :color="gradientColor"
  5.   text="渐变色"
  6. />

逆时针方向

将 clockwise 设置为 false，进度会从逆时针方向开始。

  1. <van-circle
  2.   v-model:current-rate="currentRate"
  3.   :rate="rate"
  4.   :clockwise="false"
  5.   text="逆时针方向"
  6. />

大小定制

通过 size 属性设置圆环直径。

  2.   v-model:current-rate="currentRate"
  3.   :rate="rate"
  4.   size="120px"
  5.   text="大小定制"
  6. />

Props

Slots

类型定义

组件导出以下类型定义：

    组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。