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-color
和inactive-color
可以传递图鸟内置的普通背景颜色预设值背景色,也可以传递自定义的颜色值 在圆形进度条中只能传递hex
、rgb
、rgba
的值
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
,在stripe
为true
时生效
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 | 进度条已完成的值 | Number | 0 | - |
active-color | 进度条已完成的颜色,具体可设置的格式看上面详细说明 | String | - | - |
inactive-color | 进度条未完成的颜色,具体可设置的格式看上面详细说明 | String | - | - |
show-percent | 是否显示当前进度 | Boolean | false | true |
duration | 动画执行时间,单位ms | Number | 1500 | - |
Slots
插槽名 | 说明 |
---|---|
default | 自定义进度内容 |
LineProgressProps
属性名 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
height | 进度条高度,默认单位为 rpx,可以传入带单位的尺寸值 | String | Number | 20 | - |
stripe | 是否显示条纹 | Boolean | false | true |
stripe-animated | 条纹是否有动画 | Boolean | true | false |
CircleProgressProps
属性名 | 说明 | 类型 | 默认值 | 可选值 |
---|---|---|---|---|
radius | 进度条圆半径,单位px | Number | 50 | - |
ring-width | 进度条圆环宽度,单位px | Number | 7 | - |