Progress 进度条

用于展示操作进度，告知用户当前状态和预期。

线性进度条

Progress 组件设置 percentage 属性即可，表示进度条对应的百分比。该属性必填，并且必须在 0-100 的范围内。你可以通过设置 format 来自定义文字显示的格式。

50%

满

百分比内显

百分比不占用额外控件，适用于文件上传等场景。可通过 stroke-width 属性更改进度条的高度，并可通过 text-inside 属性来改变进度条内部的文字。

70%

100%

80%

50%

自定义颜色

可通过 color 设置进度条的颜色，color 可以接受颜色字符串，函数和数组。

20%

<template>
  <tu-progress :percentage="percentage" :color="customColor" />
  <tu-progress :percentage="percentage" :color="customColorMethod" />
  <tu-progress :percentage="percentage" :color="customColors" />
  <tu-progress :percentage="percentage" :color="customColors" />
  <div>
    <tu-button-group>
      <tu-button :icon="Minus" @click="handleDecrease" />
      <tu-button :icon="Plus" @click="handleIncrease" />
    </tu-button-group>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Minus, Plus } from '@tu-view-plus/icons-vue';

const percentage = ref(20);
const customColor = ref('#409eff');

const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
];

const customColorMethod = (percentage: number) => {
  if (percentage < 30) {
    return '#909399';
  }
  if (percentage < 70) {
    return '#e6a23c';
  }
  return '#67c23a';
};

const handleIncrease = () => {
  percentage.value += 10;
  if (percentage.value > 100) {
    percentage.value = 100;
  }
};

const handleDecrease = () => {
  percentage.value -= 10;
  if (percentage.value < 0) {
    percentage.value = 0;
  }
};
</script>
<style scoped>
.tu-progress--line {
  margin-bottom: 15px;
}
</style>

<template>
  <tu-progress :percentage="percentage" :color="customColor" />
  <tu-progress :percentage="percentage" :color="customColorMethod" />
  <tu-progress :percentage="percentage" :color="customColors" />
  <tu-progress :percentage="percentage" :color="customColors" />
  <div>
    <tu-button-group>
      <tu-button :icon="Minus" @click="handleDecrease" />
      <tu-button :icon="Plus" @click="handleIncrease" />
    </tu-button-group>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Minus, Plus } from '@tu-view-plus/icons-vue';

const percentage = ref(20);
const customColor = ref('#409eff');

const customColors = [
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
];

const customColorMethod = (percentage: number) => {
  if (percentage < 30) {
    return '#909399';
  }
  if (percentage < 70) {
    return '#e6a23c';
  }
  return '#67c23a';
};

const handleIncrease = () => {
  percentage.value += 10;
  if (percentage.value > 100) {
    percentage.value = 100;
  }
};

const handleDecrease = () => {
  percentage.value -= 10;
  if (percentage.value < 0) {
    percentage.value = 0;
  }
};
</script>
<style scoped>
.tu-progress--line {
  margin-bottom: 15px;
}
</style>

环形进度条

可通过 type 属性来指定使用环形进度条，在环形进度条中，还可以通过 width 属性来设置其大小。

70%

自定义内容

可通过默认插槽添加自定义内容。

内容

动画进度条

可通过 intermediate 属性来设置不确定的进度， duration 来控制动画持续时间

50%

满

条纹进度条

可通过 striped 属性获取条纹进度条。也可以使用 striped-flow 属性来使条纹流动起来。使用 duration 属性来控制条纹流动的速度。

50%

<template>
  <tu-progress striped :percentage="50" />
  <tu-progress status="warning" striped striped-flow :percentage="30" />
  <tu-progress
    status="success"
    striped
    striped-flow
    :percentage="100"
    :duration="10"
  />
  <tu-progress
    status="exception"
    striped
    striped-flow
    :percentage="percentage"
    :duration="duration"
  />
  <tu-button-group>
    <tu-button :icon="Minus" @click="handleDecrease" />
    <tu-button :icon="Plus" @click="handleIncrease" />
  </tu-button-group>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { Minus, Plus } from '@tu-view-plus/icons-vue';

const percentage = ref<number>(70);
const duration = computed(() => Math.floor(percentage.value / 10));

const handleIncrease = () => {
  percentage.value += 10;
  if (percentage.value > 100) {
    percentage.value = 100;
  }
};
const handleDecrease = () => {
  percentage.value -= 10;
  if (percentage.value < 0) {
    percentage.value = 0;
  }
};
</script>

<style scoped>
.tu-progress--line {
  margin-bottom: 15px;
}
</style>

<template>
  <tu-progress striped :percentage="50" />
  <tu-progress status="warning" striped striped-flow :percentage="30" />
  <tu-progress
    status="success"
    striped
    striped-flow
    :percentage="100"
    :duration="10"
  />
  <tu-progress
    status="exception"
    striped
    striped-flow
    :percentage="percentage"
    :duration="duration"
  />
  <tu-button-group>
    <tu-button :icon="Minus" @click="handleDecrease" />
    <tu-button :icon="Plus" @click="handleIncrease" />
  </tu-button-group>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { Minus, Plus } from '@tu-view-plus/icons-vue';

const percentage = ref<number>(70);
const duration = computed(() => Math.floor(percentage.value / 10));

const handleIncrease = () => {
  percentage.value += 10;
  if (percentage.value > 100) {
    percentage.value = 100;
  }
};
const handleDecrease = () => {
  percentage.value -= 10;
  if (percentage.value < 0) {
    percentage.value = 0;
  }
};
</script>

<style scoped>
.tu-progress--line {
  margin-bottom: 15px;
}
</style>

进度条大小

可通过 stroke-width 设置进度条的宽度。

50%

25%

Progress API

Progress Attributes

参数名	描述	类型	默认值
percentage	百分比（必填）	`Number`	0
type	进度条类型	`line` `circle` `dashboard`	line
stroke-width	进度条的宽度	`Number`	8
text-inside	进度条显示文字内置在进度条内（仅 type 为 line 时可用）	`Boolean`	false
status	进度条当前状态	`success` `exception` `warning`	-
indeterminate	是否为动画进度条	`Boolean`	false
duration	控制动画进度条速度和条纹进度条流动速度	`Number`	3
color	进度条背景色进度条背景色（会覆盖 status 状态颜色）	`String` `Function` `Array`	-
width	环形进度条画布宽度（只在 type 为 circle 时可用）	`Number`	126
show-text	是否显示进度条文字内容	`Boolean`	true
stroke-linecap	circle/dashboard 类型路径两端的形状	`butt` `round` `square`	round
format	指定进度条文字内容	`Function`	-
striped	在进度条上增加条纹	`Boolean`	false
striped-flow	让进度条上的条纹流动起来	`Boolean`	false

Slots

参数名	描述
default	自定义内容，参数为 percentage

Progress 进度条 ​

线性进度条 ​

百分比内显 ​

自定义颜色 ​

环形进度条 ​

自定义内容 ​

动画进度条 ​

条纹进度条 ​

进度条大小 ​

Progress API ​

Progress Attributes ​

Slots ​