Skip to content
12:13

TnProgress-进度条

Progress 进度条一般用于展示数据的场景。

Progress 进度条支持两种类型,线形TnLineProgress和圆形TnCircleProgress

组件位置

typescript
import TnLineProgress from '@tuniao/tnui-vue3-uniapp/components/line-progress/src/line-progress.vue'
import TnCircleProgress from '@tuniao/tnui-vue3-uniapp/components/circle-progress/src/circle-progress.vue'
import TnLineProgress from '@tuniao/tnui-vue3-uniapp/components/line-progress/src/line-progress.vue'
import TnCircleProgress from '@tuniao/tnui-vue3-uniapp/components/circle-progress/src/circle-progress.vue'
typescript
import TnLineProgress from '@/uni_modules/tuniaoui-vue3/components/line-progress/src/line-progress.vue'
import TnCircleProgress from '@/uni_modules/tuniaoui-vue3/components/circle-progress/src/circle-progress.vue'
import TnLineProgress from '@/uni_modules/tuniaoui-vue3/components/line-progress/src/line-progress.vue'
import TnCircleProgress from '@/uni_modules/tuniaoui-vue3/components/circle-progress/src/circle-progress.vue'

平台差异说明

App(vue)H5微信小程序支付宝小程序...
适配中

WARNING

由于微信小程序官方在截止2023-05-08在使用setTimeout的时候存在不定时调用的 bug,导致在使用TnCircleProgress进行动态修改进度的时候会有不定时出现的卡顿情况,待微信官方修复后第一时间进行文档更新。

基本使用

  • 通过percent设置进度条的进度,取值范围为0-100
  • 通过show-percent设置是否显示进度条的进度值
    • 在线形进度条中,进度值显示在进度条的右侧
    • 在圆形进度条中,进度值显示在进度条的中间
  • 通过duration控制动画的执行时间,单位为ms

线形进度条

vue
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(30)
</script>

<template>
  <TnLineProgress :percent="progressPercent" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(30)
</script>

<template>
  <TnLineProgress :percent="progressPercent" />
</template>
vue
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(30)
</script>

<template>
  <TnLineProgress :percent="progressPercent" show-percent />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(30)
</script>

<template>
  <TnLineProgress :percent="progressPercent" show-percent />
</template>

圆形进度条

vue
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(30)
</script>

<template>
  <TnCircleProgress :percent="progressPercent" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(30)
</script>

<template>
  <TnCircleProgress :percent="progressPercent" />
</template>

修改进度条的颜色

通过active-color修改已完成进度的颜色,通过inactive-color修改未完成进度的颜色

在线性的进度条中active-colorinactive-color可以传递图鸟内置的普通背景颜色预设值背景色,也可以传递自定义的颜色值 在圆形进度条中只能传递hexrgbrgba的值

vue
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(30)
</script>

<template>
  <TnLineProgress
    :percent="progressPercent"
    active-color="tn-green"
    inactive-color="tn-red-light"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(30)
</script>

<template>
  <TnLineProgress
    :percent="progressPercent"
    active-color="tn-green"
    inactive-color="tn-red-light"
  />
</template>
vue
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(30)
</script>

<template>
  <TnLineProgress
    :percent="progressPercent"
    active-color="#01beff"
    inactive-color="rgba(1, 190, 250, 0.3)"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(30)
</script>

<template>
  <TnLineProgress
    :percent="progressPercent"
    active-color="#01beff"
    inactive-color="rgba(1, 190, 250, 0.3)"
  />
</template>
vue
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(30)
</script>

<template>
  <TnCircleProgress
    :percent="progressPercent"
    active-color="#01beff"
    inactive-color="rgba(1, 190, 250, 0.3)"
  />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(30)
</script>

<template>
  <TnCircleProgress
    :percent="progressPercent"
    active-color="#01beff"
    inactive-color="rgba(1, 190, 250, 0.3)"
  />
</template>

自定义进度值的内容

通过默认的插槽可以自定义进度值的内容,插槽的内容会覆盖默认的进度值显示

vue
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(90)
</script>

<template>
  <TnLineProgress :percent="progressPercent">
    <text>准备抢购成功</text>
  </TnLineProgress>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(90)
</script>

<template>
  <TnLineProgress :percent="progressPercent">
    <text>准备抢购成功</text>
  </TnLineProgress>
</template>

线性进度条特有属性

通过height设置进度条的高度,可以传递整型和带单位的的字符串,默认单位为rpx 通过stripe控制是否显示条纹,默认为false 通过stripe-animated控制条纹是否有动画,默认为true,在stripetrue时生效

vue
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(30)
</script>

<template>
  <TnLineProgress :percent="progressPercent" height="30" stripe />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(30)
</script>

<template>
  <TnLineProgress :percent="progressPercent" height="30" stripe />
</template>

圆形进度条特有属性

通过radius设置圆的半径,传递整型,单位为px 通过ring-width设置圆环的宽度,传递整型,单位为px

vue
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(30)
</script>

<template>
  <TnCircleProgress :percent="progressPercent" :radius="80" :ring-width="12" />
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const progressPercent = ref(30)
</script>

<template>
  <TnCircleProgress :percent="progressPercent" :radius="80" :ring-width="12" />
</template>

API

Props

属性名说明类型默认值可选值
percent进度条已完成的值Number0-
active-color进度条已完成的颜色,具体可设置的格式看上面详细说明String--
inactive-color进度条未完成的颜色,具体可设置的格式看上面详细说明String--
show-percent是否显示当前进度Booleanfalsetrue
duration动画执行时间,单位msNumber1500-

Slots

插槽名说明
default自定义进度内容

LineProgressProps

属性名说明类型默认值可选值
height进度条高度,默认单位为 rpx,可以传入带单位的尺寸值String | Number20-
stripe是否显示条纹Booleanfalsetrue
stripe-animated条纹是否有动画Booleantruefalse

CircleProgressProps

属性名说明类型默认值可选值
radius进度条圆半径,单位pxNumber50-
ring-width进度条圆环宽度,单位pxNumber7-

Tuniao UI