# tui-progress 进度条

介绍

用于展示操作的当前进度。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiProgress from "@/components/thorui/tui-progress/tui-progress"
export default {
	components:{
		tuiProgress
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 升级中 升级中 升级中 升级中

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-progress": "/components/thorui/tui-progress/tui-progress"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

基础使用

通过 percent 属性设置百分比,show-info 控制右侧是否显示百分比。

<!--uni-app-->
<tui-progress :percent="60" show-info></tui-progress>

<!--微信小程序-->
<tui-progress percent="{{60}}" show-info></tui-progress>
渐变色

通过 activeColor 属性传入渐变颜色值即可。

<!--uni-app-->
<tui-progress :percent="100" activeColor="linear-gradient(to right,#07c160,#ff7900)" show-info color="#ff7900"></tui-progress>

<!--微信小程序-->
<tui-progress percent="{{100}}" activeColor="linear-gradient(to right,#07c160,#ff7900)" show-info color="#ff7900"></tui-progress>

# Slots

none

# Props

参数 类型 说明 默认值
percent [Number,String] 百分比(0-100),传入数字即可,如:60%传入60 0
showInfo Boolean 右侧是否显示百分比 false
radius String 圆角大小 8rpx
size Number 右侧百分比字体大小 单位rpx 28
color String 右侧百分比颜色 #333
percentWidth Number 右侧百分比宽度 单位rpx 92
width Number 进度条线条宽度 单位rpx 8
activeColor String 进度条颜色 #5677fc
backgroundColor String 进度条轨道颜色 #EBEBEB
duration Number 进度增加1%所需毫秒数 20

# Events

事件名 说明 回调参数
activeend 进度动画完成事件 { }

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码