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

介紹

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

實(shí)例演示

引入

通過以下方式來全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

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

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

代碼演示

基礎(chǔ)用法

rate 屬性表示進(jìn)度條的目標(biāo)進(jìn)度，v-model:current-rate 表示動(dòng)畫過程中的實(shí)時(shí)進(jìn)度。當(dāng) rate 發(fā)生變化時(shí)，v-model:current-rate 會(huì)以 speed 的速度變化，直至達(dá)到 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 屬性來控制進(jìn)度條寬度。

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

顏色定制

通過 color 屬性來控制進(jìn)度條顏色，layer-color 屬性來控制軌道顏色。

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

漸變色

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

<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,
    };
  },
};

逆時(shí)針方向

將 clockwise 設(shè)置為 false，進(jìn)度會(huì)從逆時(shí)針方向開始。

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

大小定制

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

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

API

Props

Slots

樣式變量

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