van-Circle 环形进度条
涉及的功能点:
-
圆形进度条:文本自定义样式大小
颜色定制、大小定制、渐变色、宽度定制
-
模拟断点续传
<template>
<div class="demo">
<div class="syn_data fcc pt20">
<van-circle
class="syn_circle"
v-model="currentRate"
:rate="rate"
:color="gradientColor"
:text="rate"
:size="size"
:layer-color="layerColor"
:stroke-linecap="strokeLineCap"
:stroke-width="strokeWidth"
/>
<span :class="['van-circle__text', rate.length === 2 ? 'ml45' : 'ml60']"
>%