@tanzhenxing/zx-progress v1.0.3

zx-progress 进度条组件

基于 uni-app 官方 progress 组件规范优化的进度条组件，支持动画效果和自定义样式。

特性

• ✅ 完全兼容 uni-app 官方 progress 组件属性
• ✅ 支持动画效果（active 模式）
• ✅ 支持两种动画模式：backwards（从头播放）和 forwards（从上次结束点继续）
• ✅ 支持 rpx 和 px 单位
• ✅ 支持渐变色
• ✅ 提供动画完成回调
• ✅ 向后兼容旧版本属性
• ✅ 暴露控制方法

属性说明

事件

暴露方法

基础用法

<template>
  <view>
    <!-- 基础进度条 -->
    <zx-progress :percent="30" />
    
    <!-- 显示百分比 -->
    <zx-progress :percent="50" :showInfo="true" />
    
    <!-- 自定义样式 -->
    <zx-progress 
      :percent="70" 
      :showInfo="true"
      strokeWidth="10"
      borderRadius="5rpx"
      activeColor="linear-gradient(to right, #4facfe, #00f2fe)"
      backgroundColor="#f0f0f0"
    />
    
    <!-- 动画效果 -->
    <zx-progress 
      :percent="80" 
      :active="true"
      :duration="50"
      @activeend="onAnimationEnd"
    />
  </view>
</template>

<script setup>
const onAnimationEnd = (e) => {
  console.log('动画完成，当前进度：', e.percent);
};
</script>

高级用法

<template>
  <view>
    <!-- 控制动画 -->
    <zx-progress 
      ref="progressRef"
      :percent="progressValue" 
      :active="true"
      activeMode="forwards"
    />
    
    <button @click="updateProgress">更新进度</button>
    <button @click="resetProgress">重置进度</button>
  </view>
</template>

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

const progressRef = ref();
const progressValue = ref(0);

const updateProgress = () => {
  progressValue.value = Math.random() * 100;
};

const resetProgress = () => {
  progressRef.value?.reset();
  progressValue.value = 0;
};
</script>

渐变色用法

<template>
  <zx-progress 
    :percent="60"
    :showInfo="true"
    strokeWidth="12"
    borderRadius="6rpx"
    activeColor="linear-gradient(90deg, #ff6b6b 0%, #feca57 50%, #48dbfb 100%)"
  />
</template>

兼容性说明

本组件完全兼容 uni-app 官方 progress 组件的属性，同时保持向后兼容：

• showInfo 属性保持支持（官方为 show-info）
• 新增了官方规范的 borderRadius、fontSize、strokeWidth 属性
• 新增了 active、activeMode 动画相关属性
• 保持原有的 percentWidth 自定义属性

注意事项

1. 单位支持：Number 类型默认为 rpx，String 类型需要带单位（如 '20px'）
2. 动画模式：
   • backwards：每次都从 0% 开始播放动画
   • forwards：从当前位置继续播放到目标位置
3. 渐变色：支持 CSS 渐变语法，如 linear-gradient() 等