Circle 环形进度条

使用指南

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

代码演示

基础用法

通过 rate 指定目标进度，v-model 代表当前进度，speed 控制动画速度

  1. <van-circle
  2.   v-model="currentRate"
  3.   :rate="30"
  4.   :speed="100"
  5.   :text="text"
  6. />
  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. };

样式定制

  1. <van-circle
  2.   v-model="currentRate"
  3.   color="#13ce66"
  4.   fill="#fff"
  5.   size="120px"
  6.   layer-color="#eee"
  7.   :text="text"
  8.   :rate="rate"
  9.   :speed="100"
  10.   :clockwise="false"
  11.   :stroke-width="60"
  12. />

API

参数 说明 类型 默认值
v-model 当前进度 Number -
rate 目标进度 Number 100
size 圆环直径 String 100px
color 进度条颜色 String #38f
layer-color 轨道颜色 String #fff
fill 填充颜色 String none
speed 动画速度（单位为 rate/s） Number -
text 文字 String -
stroke-width 进度条宽度 Number 40
clockwise 是否顺时针增加 Boolean true

Circle Slot

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

原文:

https://youzan.github.io/vant/#/zh-CN/circle