Progress 进度条 1.0.19

手机扫码预览

23:37



---

组件名：rice-progress-circle

用于展示操作的进度，1.0.19 版本开始支持

平台兼容性

uni-app x

Android	iOS	鸿蒙Next	微信小程序	h5
√	√	√(HBuilderx 4.80+)	√	√

基础用法

• 通过percentage 可以设置当前的百分比
• type 值设为 dashboard 可显示为仪表盘形进度条

<rice-progress-circle :percentage="50" />
<rice-progress-circle :percentage="50" type="dashboard"/>

自定义颜色

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

<rice-progress-circle :percentage="50" color="#f56c6c" inactive-color="#fab5b5" />
<rice-progress-circle :percentage="value3" :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>

自定义文本

• text-size 设置文本的大小
• text-color 设置文本的颜色
• format 函数格式化文本的内容

<rice-progress-circle :percentage="value3" :text-color="formatColors" text-size="18px" :format="formatText" />
<script setup>
const value3=ref(50)
const formatText = (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>

自定义大小

• size 可以设置整个圆环的尺寸，宽/高一致
• stroke-width 可以设置进度条宽度，单位px
• stroke-width type为dashboard时，可以设置底部开口大小，默认60

<rice-progress-circle :percentage="50" size="80px" />
<rice-progress-circle :percentage="60" size="70px" :stroke-width="5" :custom-style="{margin:'0 12px'}" />
<rice-progress-circle :percentage="70" type="dashboard" size="70px" :stroke-width="5" :gap-angle="120" />

自定义插槽

<rice-progress-circle :percentage="slotValue" :show-text="false">
  <text class="slot-text">{{slotValue}}%</text>
  <text class="slot-text2">这是自定义内容的插槽</text>
</rice-progress-circle>

API

Props

属性名	类型	说明	默认值
percentage	String|Number	进度百分比 0-100	-
type	String	类型，默认 circle 可选 dashboard	circle
size	String|Number	整个圆环的尺寸，宽/高一致	100px
stroke-width	Number	进度条宽度，单位px	8
duration	Number	动画时长,默认350ms，单位ms	350
show-text	Boolean	是否显示文字，默认true	-
text-color	String	文字颜色	-
text-size	String|Number	文字大小	-
format	Function	自定义文字格式	-
color	String	激活的进度条颜色	-
inactive-color	String	未激活的进度条颜色	-
gap-angle	Number	type为dashboard时，底部开口大小	60
custom-style	Object	自定义样式	-

类型定义

组件导出如下类型

// 组件类型
const progressCircleRef = ref<RiceProgressCircleComponentPublicInstance | null>(null)