Vant3 Circle 環(huán)形進度條

介紹

圓環(huán)形的進度條組件，支持進度漸變動畫。

實例演示

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

import { createApp } from 'vue';
import { Circle } from 'vant';

const app = createApp();
app.use(Circle);

代碼演示

基礎用法

rate 屬性表示進度條的目標進度，v-model:current-rate 表示動畫過程中的實時進度。當 rate 發(fā)生變化時，v-model:current-rate 會以 speed 的速度變化，直至達到 rate 設定的值。

<van-circle
  v-model:current-rate="currentRate"
  :rate="30"
  :speed="100"
  :text="text"
/>

import { ref, computed } from 'vue';

export default {
  setup() {
    const currentRate = ref(0);
    const text = computed(() => currentRate.value.toFixed(0) + '%');

    return {
      text,
      currentRate,
    };
  },
};

寬度定制

通過 stroke-width 屬性來控制進度條寬度。

<van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  :stroke-width="60"
  text="寬度定制"
/>

顏色定制

通過 color 屬性來控制進度條顏色，layer-color 屬性來控制軌道顏色。

<van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  layer-color="#ebedf0"
  text="顏色定制"
/>

漸變色

color 屬性支持傳入對象格式來定義漸變色。

<van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  :color="gradientColor"
  text="漸變色"
/>

import { ref } from 'vue';

export default {
  setup() {
    const currentRate = ref(0);
    const gradientColor = {
      '0%': '#3fecff',
      '100%': '#6149f6',
    };

    return {
      currentRate,
      gradientColor,
    };
  },
};

逆時針方向

將 clockwise 設置為 false，進度會從逆時針方向開始。

<van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  :clockwise="false"
  text="逆時針方向"
/>

大小定制

通過 size 屬性設置圓環(huán)直徑。

<van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  size="120px"
  text="大小定制"
/>

API

Props

Slots

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請參考 ConfigProvider 組件。