Circle 环形进度条

介绍

圆环形的进度条组件,支持进度渐变动画。

引入

  1. import Vue from 'vue';
  2. import { Circle } from 'vant';
  3. Vue.use(Circle);

代码演示

基础用法

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

  1. <van-circle v-model="currentRate" :rate="30" :speed="100" :text="text" />
  1. export default {
  2. data() {
  3. return {
  4. currentRate: 0,
  5. };
  6. },
  7. computed: {
  8. text() {
  9. return this.currentRate.toFixed(0) + '%';
  10. },
  11. },
  12. };

宽度定制

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

  1. <van-circle
  2. v-model="currentRate"
  3. :rate="rate"
  4. :stroke-width="60"
  5. text="宽度定制"
  6. />

颜色定制

通过 color 属性来控制进度条颜色,layer-color 属性来控制轨道颜色。

  1. <van-circle
  2. v-model="currentRate"
  3. :rate="rate"
  4. layer-color="#ebedf0"
  5. text="颜色定制"
  6. />

渐变色

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

  1. <van-circle
  2. v-model="currentRate"
  3. :rate="rate"
  4. :color="gradientColor"
  5. text="渐变色"
  6. />
  1. export default {
  2. data() {
  3. return {
  4. currentRate: 0,
  5. gradientColor: {
  6. '0%': '#3fecff',
  7. '100%': '#6149f6',
  8. },
  9. };
  10. },
  11. };

逆时针方向

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

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

大小定制

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

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

API

Props

参数说明类型默认值
v-model当前进度number-
rate目标进度number | string100
size圆环直径,默认单位为 pxnumber | string100px
color进度条颜色,传入对象格式可以定义渐变色string | object#1989fa
layer-color轨道颜色stringwhite
fill填充颜色stringnone
speed动画速度(单位为 rate/s)number | string0
text文字string-
stroke-width进度条宽度number | string40
stroke-linecap进度条端点的形状,可选值为sqaure buttstringround
clockwise是否顺时针增加booleantrue

Slots

名称说明
default自定义文字内容

样式变量

组件提供了下列 Less 变量,可用于自定义样式,使用方法请参考主题定制

名称默认值描述
@circle-text-color@text-color-
@circle-text-font-weight@font-weight-bold-
@circle-text-font-size@font-size-md-
@circle-text-line-height@line-height-md-

Circle 环形进度条 - 图1