Circle 环形进度条

引入

  1. import{Circle}from'vant';
  2. 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. exportdefault{
  2. data(){
  3. return{
  4. currentRate:0
  5. };
  6. },
  7. computed:{
  8. text(){
  9. returnthis.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