qrcode
扫描二维码查看 H5 演示效果
qrcode
扫描二维码查看演示效果
taro-ui, 非 taro-ui-vue3
wxapp

Progress 进度条

提供一个方便的 进度条 组件

使用指南

在 Taro 文件中引入组件

import { AtProgress } from 'taro-ui-vue3'

组件依赖的样式文件（仅按需引用时需要）

@import "taro-ui-vue3/dist/style/components/progress.scss";

一般用法

<template>
  <AtProgress />
</template>
<script>
export default {
  name: 'AtProgressDemo'
}
</script>

传入当前进度

<template>
 <view>
  <AtProgress :percent="25" />
  <AtProgress :percent="50" />
  <AtProgress :percent="75" />
 </view>
</template>
<script>
export default {
  name: 'AtProgressDemo'
}
</script>

是否隐藏信息

<template>
 <view>
  <AtProgress :percent="25" isHidePercent />
  <AtProgress :percent="75" isHidePercent />
 </view>
</template>

自定义进度条的线宽

<template>
 <view>
  <AtProgress :percent="25" :strokeWidth="6" />
  <AtProgress :percent="50" :strokeWidth="8" />
  <AtProgress :percent="75" :strokeWidth="10" />
 </view>
</template>

自定义进度条颜色

<template>
 <view>
  <AtProgress :percent="25" color='#FF4949' />
  <AtProgress :percent="50" color='#13CE66' />
  <AtProgress :percent="75" color='#FFC82C' />
 </view>
</template>

传入不同的状态

<template>
 <view>
  <AtProgress :percent="75" status='error' />
  <AtProgress :percent="50" status='progress' />
  <AtProgress :percent="100" status='success' />
 </view>
</template>

AtProgress 参数

参数说明类型可选值默认值
color元素的颜色String--
status元素的状态Stringprogress,error,success-
percent元素的进度Number--
strokeWidth元素的规格Number--
isHidePercent是否隐藏文字Boolean-false