Vant3 中文入门教程 Vant3 Circle 环形进度条

2024-02-25 开发教程 Vant3 中文入门教程 匿名 8

介绍

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

实例演示

引入

通过以下方式来全局注册组件,更多注册方式请参考组件注册。

import { createApp } from 'vue';
import { Circle } from 'vant';
const app = createApp();
app.use(Circle);

代码演示

基础用法

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

<van-circle
v-model:current-rate="currentRate"
:rate="30"
:speed="100"
:text="text"
/>
import { ref, computed } from 'vue';
export default {
setup() {
const currentRate = ref(0);
const text = computed(() => currentRate.value.toFixed(0) + '%');
return {
text,
currentRate,
};
},
};

宽度定制

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

<van-circle
v-model:current-rate="currentRate"
:rate="rate"
:stroke-width="60"
text="宽度定制"
/>

颜色定制

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

<van-circle
v-model:current-rate="currentRate"
:rate="rate"
layer-color="#ebedf0"
text="颜色定制"
/>

渐变色

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

<van-circle
v-model:current-rate="currentRate"
:rate="rate"
:color="gradientColor"
text="渐变色"
/>
import { ref } from 'vue';
export default {
setup() {
const currentRate = ref(0);
const gradientColor = {
'0%': '#3fecff',
'100%': '#6149f6',
};
return {
currentRate,
gradientColor,
};
},
};

逆时针方向

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

<van-circle
v-model:current-rate="currentRate"
:rate="rate"
:clockwise="false"
text="逆时针方向"
/>

大小定制

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

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

API

Props

参数说明类型默认值
v-model:current-rate当前进度

number

-
rate目标进度

number | string

100

size

圆环直径,默认单位为 px

number | string

100px

color进度条颜色,传入对象格式可以定义渐变色

string | object

#1989fa

layer-color轨道颜色

string

white

fill填充颜色

string

none

speed动画速度(单位为 rate/s)

number | string

0

text文字

string

-
stroke-width进度条宽度

number | string

40

stroke-linecap

进度条端点的形状,可选值为 squarebutt

string

round

clockwise是否顺时针增加

boolean

true

Slots

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

样式变量

组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。

名称默认值描述
--van-circle-size

100px

-
--van-circle-color

var(--van-primary-color)

-
--van-circle-layer-color

var(--van-white)

-
--van-circle-text-color

var(--van-text-color)

-
--van-circle-text-font-weight

var(--van-font-weight-bold)

-
--van-circle-text-font-size

var(--van-font-size-md)

-
--van-circle-text-line-height

var(--van-line-height-md)

-