Progress 进度条

介绍

用于展示操作的当前进度。

导入

import Progress from '@/components/display/Progress.vue'

使用方法

基础用法

基础的水平进度条，支持多种颜色。

<template>
  <FlexCol :gap="20">
    <Progress :value="progress" />
    <Progress progressColor="success" :value="progress" />
    <Progress progressColor="warning" :value="progress" />
    <Progress progressColor="danger" :value="progress" />
  </FlexCol>
</template>

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

const progress = ref(50);
</script>

从右到左的进度条

通过设置 type 属性为 right-left 可以创建从右到左的进度条。

<template>
  <Progress type="right-left" :value="progress" />
</template>

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

const progress = ref(50);
</script>

调整线条粗细

通过 height 属性可以调整进度条的粗细。

<template>
  <Progress :value="progress" :height="20" />
</template>

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

const progress = ref(50);
</script>

显示进度文字

通过设置 showProgressText 属性为 true 显示进度百分比文字。

<template>
  <FlexCol :gap="50">
    <Progress :value="progress" showProgressText />
    <Progress :value="progress" type="right-left" showProgressText />
    <Progress :value="progress" showProgressText progressPos="left" />
    <Progress :value="progress" showProgressText progressPos="right" />
  </FlexCol>
</template>

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

const progress = ref(50);
</script>

竖向进度条

通过设置 type 属性为 top-bottom 或 bottom-top 可以创建竖向进度条。

<template>
  <FlexRow :gap="60">
    <FlexRow :gap="20" :height="300">
      <Progress type="top-bottom" :value="progress" />
      <Progress type="top-bottom" progressColor="success" :value="progress" />
      <Progress type="bottom-top" progressColor="warning" :value="progress" />
      <Progress type="bottom-top" progressColor="danger" :value="progress" />
    </FlexRow>
    <FlexRow :gap="50" :height="300">
      <Progress type="top-bottom" :value="progress" showProgressText />
      <Progress type="bottom-top" showProgressText :value="progress" />
    </FlexRow>
  </FlexRow>
</template>

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

const progress = ref(50);
</script>

有动画效果的进度条

通过设置 animate 属性为 true 可以为进度条添加过渡动画效果。

<template>
  <FlexCol :gap="20">
    <FlexCol :gap="50">
      <Progress animate :value="progress" />
      <Progress animate :value="progress" showProgressText />
    </FlexCol>
    <FlexRow :gap="20">
      <Button @click="progress -= 10">- 减少</Button>
      <Button @click="progress += 10">+ 增加</Button>
    </FlexRow>
  </FlexCol>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Button from '@/components/basic/Button.vue';

const progress = ref(50);
</script>

API 参考

Progress

进度条组件。

Props

名称	说明	类型	必填	默认值
value	当前进度，0-100	number	是	0
backgroundColor	背景的颜色	string	-	'gray'
progressColor	进度的颜色	string	-	'primary'
progressPos	进度文字的位置。center 居中；right 居右；flow 跟随进度	'left' | 'right' | 'flow'	-	'flow'
progressTextStyle	进度文字的自定义样式	TextStyle	-	-
progressStyle	进度的样式	ViewStyle	-	-
type	进度条的方向 * left-right 横向，从左到右 * right-left 横向，从右到左 * top-bottom 竖向，从上到下 * bottom-top 竖向，从下到上	'left-right' | 'right-left' | 'top-bottom' | 'bottom-top'	-	'left-right'
height	进度条的高度，竖向模式时自动设置为高度	number	-	15
width	进度条宽度，默认100%沾满父容器	number | string	-	'100%'
showProgressText	是否显示进度文字	boolean	-	false
innerStyle	背景样式	ViewStyle	-	-
round	是否是圆角	boolean	-	true
radius	round=true 时的圆角大小	number	-	20
animate	是否有动画效果	boolean	-	false
animateDuration	动画效果时长，ms	number	-	300

Events

名称	说明	参数
click	点击事件	$event

主题变量

名称	类型	默认值	说明
ProgressBackgroundColor	string	'gray'	背景颜色
ProgressProgressColor	string	'primary'	进度颜色
ProgressType	string	'left-right'	进度条方向
ProgressHeight	number	15	进度条高度
ProgressWidth	string	'100%'	进度条宽度
ProgressShowProgressText	boolean	false	是否显示进度文字
ProgressProgressPos	string	'flow'	进度文字位置
ProgressRound	boolean	true	是否是圆角
ProgressRadius	number	20	圆角大小
ProgressAnimate	boolean	false	是否有动画效果
ProgressAnimateDuration	number	300	动画时长(ms)
ProgressTextWidth	number	80	进度文字宽度
ProgressTextAlign	string	'center'	进度文字对齐方式
ProgressTextPaddingVertical	number	2	进度文字垂直内边距
ProgressTextPaddingHorizontal	number	2	进度文字水平内边距
ProgressTextBorderRadius	number	20	进度文字圆角半径
ProgressTextFontSize	number	24	进度文字字体大小
ProgressTextColor	string	'white'	进度文字颜色
ProgressTextSingleColor	string	'text.content'	单独显示的进度文字颜色