Tantalum UI

Appearance

Return to top
On this page

Progress 进度条

vue
<template>
  <ta-group title="基础用法">
    <div class="exp-progress-box">
      <ta-progress :percentage="percentage" />
    </div>
    <div class="exp-progress-bottom">
      <ta-stepper :min="0" :max="100" v-model="percentage" />
    </div>
  </ta-group>
  <ta-group title="展示文字">
    <ul class="exp-progress-list">
      <li>
        <ta-progress :percentage="5" show-text />
      </li>
      <li>
        <ta-progress :percentage="50" show-text />
      </li>
      <li>
        <ta-progress :percentage="100" show-text />
      </li>
    </ul>
  </ta-group>
  <ta-group title="固定进度条">
    <ul class="exp-progress-list fixed-bar">
      <li>
        <ta-progress :percentage="5" fixed-bar show-text />
      </li>
      <li>
        <ta-progress :percentage="50" fixed-bar show-text />
      </li>
      <li>
        <ta-progress :percentage="100" fixed-bar show-text />
      </li>
    </ul>
  </ta-group>
  <ta-group title="Slot default">
    <div class="exp-progress-box">
      <ta-progress :percentage="5">
        <template #default="{ progress }"> 已抢{{ progress }} </template>
      </ta-progress>
    </div>
  </ta-group>
  <ta-group title="自定义颜色">
    <div class="exp-progress-box">
      <ta-progress :percentage="50" show-text color="#8b1721" />
    </div>
  </ta-group>
</template>

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

export default defineComponent({
  name: 'ExpProgress',
  data() {
    return {
      percentage: 0
    }
  }
})
</script>

Import

js
import { TaProgress } from 'tantalum-ui-mobile'

具体的引入方式可以参考引入组件。

Props

属性类型默认值必填说明
percentagestring | number是百分比，例如：50
show-textbooleanfalse否是否展示文字
fixed-barbooleanfalse否是否固定进度条宽度，配合 show-text=true 使用，防止由于文字 5% 和 100% 宽度不一样导致进度条长短不一

Slots

内容区（#default）

vue
<ta-progress :percentage="5">
  <template #default="{ progress }"> 已抢{{ progress }} </template>
</ta-progress>

注：添加 slot 后 show-text prop 属性失效。