引入

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

Vue.use(Circle);

基礎(chǔ)用法

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

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

export default {
  data() {
    return {
      currentRate: 0,
    };
  },
  computed: {
    text() {
      return this.currentRate.toFixed(0) + '%';
    },
  },
};

寬度定制

通過 stroke-width 屬性來控制進(jìn)度條寬度。

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

顏色定制

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

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

漸變色

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

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

export default {
  data() {
    return {
      currentRate: 0,
      gradientColor: {
        '0%': '#3fecff',
        '100%': '#6149f6',
      },
    };
  },
};

逆時(shí)針方向

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

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

大小定制

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

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

Props

Slots

樣式變量

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