• Circle 环形进度条
    • 引入
  • 代码演示
    • 基础用法
    • 样式定制
  • API
    • Props
    • Slots

    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="#07c160"
    4.   fill="#fff"
    5.   size="120px"
    6.   layer-color="#ebedf0"
    7.   :text="text"
    8.   :rate="rate"
    9.   :speed="100"
    10.   :clockwise="false"
    11.   :stroke-width="60"
    12. />

    API

    Props

    参数说明类型默认值版本
    v-model当前进度Number--
    rate目标进度Number100-
    size圆环直径String100px-
    color进度条颜色String#1989fa-
    layer-color轨道颜色String#fff-
    fill填充颜色Stringnone-
    speed动画速度（单位为 rate/s）Number--
    text文字String--
    stroke-width进度条宽度Number40-
    clockwise是否顺时针增加Booleantrue-

    Slots

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

    Circle 环形进度条 - 图1