Tuniao UI Uniapp V3

Appearance

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-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进度条已完成的值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

Copyright © 2019-present Evan You,Made with ❤️ by Tuniao UI