@tanzhenxing/zx-circle v1.0.2

zx-circle 环形进度条

圆环形的进度条组件，支持进度渐变动画，兼容 H5、小程序和 APP。

引入

<script setup>
import ZxCircle from '@/components/zx-circle/zx-circle.vue';
</script>

代码演示

基础用法

rate 属性表示进度条的目标进度，v-model:currentRate (或 :current-rate 并监听 @update:currentRate) 表示动画过程中的实时进度。当 rate 发生变化时，currentRate 会以 speed 的速度变化，直至达到 rate 设定的值。

<template>
  <zx-circle v-model:currentRate="currentRate" :rate="30" :speed="100" :text="text" />
</template>

<script setup>
import { ref, computed } from 'vue';

const currentRate = ref(0);
const text = computed(() => currentRate.value.toFixed(0) + '%');
</script>

宽度定制

通过 stroke-width 属性来控制进度条宽度，stroke-width 指的是 SVG 中 path 的宽度，默认值为 40。注意，此单位非 px。

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

颜色定制

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

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

渐变色

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

<template>
  <zx-circle v-model:currentRate="currentRate" :rate="rate" :color="gradientColor" text="渐变色" />
</template>

<script setup>
import { ref } from 'vue';

const currentRate = ref(0);
const rate = ref(70);
const gradientColor = {
  '0%': '#3fecff',
  '100%': '#6149f6',
};
</script>

逆时针方向

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

<zx-circle v-model:currentRate="currentRate" :rate="rate" :clockwise="false" text="逆时针" />

大小定制

通过 size 属性设置圆环直径，单位为 rpx。

<zx-circle v-model:currentRate="currentRate" :rate="rate" size="240" text="大小定制" />

起始位置

进度条默认从顶部开始，可以通过 start-position 属性设置起始位置，可选值为 top, right, bottom, left。

<zx-circle v-model:currentRate="currentRate" :rate="rate" text="左侧" start-position="left" />
<zx-circle v-model:currentRate="currentRate" :rate="rate" text="右侧" start-position="right" />
<zx-circle v-model:currentRate="currentRate" :rate="rate" text="底部" start-position="bottom" />

API

Props

Events

Slots

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式。