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

介紹

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

引入

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

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

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

代碼演示

基礎(chǔ)用法

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

<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? 設(shè)置為 ?false?，進度會從逆時針方向開始。

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

大小定制

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

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

起始位置

進度條默認(rèn)從頂部開始，可以通過 ?start-position? 屬性設(shè)置起始位置。

<van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  :text="左側(cè)"
  start-position="left"
/>
<van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  text="右側(cè)"
  start-position="right"
/>
<van-circle
  v-model:current-rate="currentRate"
  :rate="rate"
  text="底部"
  start-position="bottom"
/>

API

Props

Slots

類型定義

組件導(dǎo)出以下類型定義：

import type { CircleProps, CircleStartPosition } from 'vant';

主題定制

樣式變量

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