Progress 进度条

预览

01:38



---

组件名：rice-progress

用于展示操作的进度

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√	√	√

基础用法

通过percentage 可以设置当前的百分比

<rice-progress :percentage="value" />

不显示百分比

设置 show-text 为false 即可不显示百分比

<rice-progress :percentage="70" :show-text="false" />

百分比内显

text-position 设置为 inside 百分之就会显示在进度条内

<rice-progress :percentage="60" show-text text-position="inside" />

自定义颜色

• color 设置进度条激活的颜色
• inactive-color 设置进度条未选中的颜色
• text-color 设置百分比的颜色

<rice-progress :percentage="60" color="#f56c6c" inactive-color="rgba(245, 108, 108,.5)" :show-text="false"/>
<rice-progress :percentage="value3" :color="formatColors" :text-color="formatColors" />

<script setup>
const value3 = ref(50)
const formatColors = computed(() => {
  const percent = value3.value
  if (percent < 20) return '#f56c6c'
  if (percent < 40) return '#e6a23c'
  if (percent < 50) return '#5cb87a'
  if (percent < 60) return '#f56c6c'
  if (percent < 80) return '#845ec2'
  return '#c34a36'
})
</script>

自定义文本

通过 format 函数格式化文本的内容

<rice-progress :percentage="value3" :format="format" />
<script setup>
const format = (percent : number) : string => {
  if (percent < 20) return `拉低平均值`
  if (percent < 60) return `不合格`
  if (percent < 70) return `合格`
  if (percent <= 80) return `良好`
  if (percent >= 90) return '非常优秀'
  return `${percent}%`
}
</script>

自定义圆角

radius 属性可以设置进度条的圆角值

<rice-progress :percentage="60" radius="0" />

自定义大小

stroke-width 可以设置进度条的大小

<rice-progress :percentage="60" stroke-width="12px"/>

API

Props

属性名	类型	说明	默认值
percentage	String|Number	进度百分比 0-100	-
stroke-width	String|Number	进度条宽度	-
show-text	Boolean	是否显示文字，默认true	-
text-color	String	文字颜色	-
text-size	String|Number	文字大小	-
text-position	String	文字位置，可选值：right、inside	-
format	Function	自定义文字格式	-
color	String	激活的进度条颜色	-
inactive-color	String	未激活的进度条颜色	-
radius	String|Number	圆角大小	-
custom-style	Object	自定义样式	-

类型定义

组件导出如下类型

// 组件类型
const progressRef = ref<RiceProgressComponentPublicInstance | null>(null)