X-Next

Appearance

Progress 进度条 ​

用于表达任务进度、上传状态或流程完成度。

何时使用 ​

  • 需要展示一个耗时任务的当前完成比例。
  • 需要表达上传、导入、部署、审批等流程的状态。
  • 需要用步骤段落展示离散进度。

基础用法 ​

60%
vue
<template>
  <x-progress :percent="0.6" />
  <x-progress :percent="0.6" :show-text="false" />
</template>

动态进度 ​

28%
vue
<template>
  <x-progress :percent="percent" animation />
  <div class="actions">
    <x-button type="primary" size="small" @click="start">开始</x-button>
    <x-button size="small" @click="reset">重置</x-button>
  </div>
</template>

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

const percent = ref(0.28);
let timer: number | undefined;

const clearTimer = () => {
  if (timer) {
    window.clearInterval(timer);
    timer = undefined;
  }
};

const start = () => {
  clearTimer();
  percent.value = 0;
  timer = window.setInterval(() => {
    percent.value = Math.min(1, Number((percent.value + 0.08).toFixed(2)));
    if (percent.value >= 1) {
      clearTimer();
    }
  }, 280);
};

const reset = () => {
  clearTimer();
  percent.value = 0.28;
};

onBeforeUnmount(clearTimer);
</script>

状态 ​

五种状态与品牌状态族一一对应，line / circle / steps 三种形态都支持。

30%
45%
55%
60%
100%
vue
<template>
  <x-progress :percent="0.3" status="normal" />
  <x-progress :percent="0.45" status="warning" />
  <x-progress :percent="0.55" status="strong" />
  <x-progress :percent="0.6" status="danger" />
  <x-progress :percent="1" status="success" />
</template>

尺寸 ​

40%
50%
60%
70%
vue
<template>
  <x-progress size="mini" :percent="0.4" />
  <x-progress size="small" :percent="0.5" />
  <x-progress :percent="0.6" />
  <x-progress size="large" :percent="0.7" />
</template>

线性进度的 mini、small、medium、large 只改变线条和文本尺寸，不会改变进度条形态；圆形迷你进度请使用 type="circle" size="mini"。

宽度与线宽 ​

54%
70%
62%
vue
<template>
  <x-progress :percent="0.54" width="320px" :stroke-width="6" />
  <x-progress :percent="0.7" :stroke-width="10" status="warning" />
  <x-progress type="circle" :percent="0.62" :width="72" :stroke-width="5" />
  <x-progress type="circle" :percent="0.86" :width="88" :stroke-width="6" status="success" />
</template>

圆形进度 ​

45%
75%
vue
<template>
  <x-progress type="circle" :percent="0.45" />
  <x-progress type="circle" :percent="0.75" status="warning" />
  <x-progress type="circle" :percent="1" status="success" />
</template>

迷你圆形进度 ​

vue
<template>
  <x-progress type="circle" size="mini" :percent="0.4" />
  <x-progress type="circle" size="mini" :percent="0.65" status="warning" />
  <x-progress type="circle" size="mini" :percent="0.8" status="danger" />
  <x-progress type="circle" size="mini" :percent="1" status="success" />
</template>

步骤进度 ​

40%
50%
67%
vue
<template>
  <x-progress :steps="5" :percent="0.4" />
  <x-progress :steps="8" :percent="0.5" status="warning" />
  <x-progress :steps="6" :percent="0.67" status="danger" :stroke-width="8" />
</template>

自定义颜色 ​

68%
72%
55%
vue
<template>
  <x-progress
    :percent="0.68"
    color="var(--x-color-success-6)"
    track-color="var(--x-color-success-1)"
  />
  <x-progress :percent="0.72" :color="gradientColor" />
  <x-progress
    :percent="0.55"
    animation
    color="var(--x-color-primary-6)"
    buffer-color="var(--x-color-primary-1)"
  />
</template>

<script setup lang="ts">
const gradientColor = {
  '0%': 'var(--x-color-success-6)',
  '55%': 'var(--x-color-primary-6)',
  '100%': 'var(--x-color-warning-6)',
};
</script>

自定义文本 ​

75 / 100
已完成 32%
vue
<template>
  <x-progress :percent="0.75">
    <template #text="{ percent }">
      {{ Math.round(percent * 100) }} / 100
    </template>
  </x-progress>
  <x-progress type="circle" :percent="0.32">
    <template #text="{ percent }">
      已完成 {{ Math.round(percent * 100) }}%
    </template>
  </x-progress>
</template>

边界值 ​

低于 0
0%
超过 1
100%
0%
vue
<template>
  <x-progress :percent="-0.2" />
  <x-progress :percent="1.2" />
  <x-progress type="circle" :percent="-0.2" />
  <x-progress type="circle" :percent="1.2" />
</template>

percent 使用 0~1 的小数，组件内部会把非法值归一化到 0~1 再渲染。

按需导入 ​

ts
import { Progress } from 'x-next';

样式按需引入（base.css 为共享基础层，多个组件只需引入一次）：

ts
import 'x-next/style/base.css';
import 'x-next/style/progress.css';

Props ​

参数说明类型默认值
type进度条类型'line' | 'circle''line'
size尺寸'mini' | 'small' | 'medium' | 'large'跟随全局配置
percent当前进度，内部按 0~1 归一化渲染number0
steps步骤条数量，大于 0 时启用步骤模式number0
animation是否开启线性进度动画booleanfalse
strokeWidth进度条线宽number按尺寸计算
width线性进度条宽度；圆形进度条仅支持数字直径string | number按类型计算
color进度条颜色，支持渐变对象string | Record<string, string>-
trackColor轨道颜色string-
bufferColor线性进度条缓冲轨道颜色string | Record<string, string>-
showText是否显示文本booleantrue
status状态'normal' | 'success' | 'warning' | 'danger'percent >= 1 ? 'success' : 'normal'

Slots ​

插槽名说明参数
text自定义进度文本{ percent: number }