使用场景
显示已经计算好的百分比或进行中的状态。
基础用法与状态
下列示例只使用本入口的实际公开能力。
基础用法与状态
<template>
<div class="demo-root-layout">
<AsamButton type="default" native-type="button" @click="value = (value + 10) % 110"
>更新本地进度</AsamButton
>
<AsamProgress :percentage="value" />
<AsamProgress type="circle" :percentage="value" :width="100" />
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamProgressBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamProgress } from '@asam-ui/ui';
const value = ref(40);
</script>
<style scoped>
.demo-root-layout {
display: flex;
gap: var(--asam-space-md);
flex-wrap: wrap;
align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style><template>
<div class="demo-root-layout">
<AsamButton type="default" native-type="button" @click="value = (value + 10) % 110"
>更新本地进度</AsamButton
>
<AsamProgress :percentage="value" />
<AsamProgress type="circle" :percentage="value" :width="100" />
</div>
</template>
<script setup>
defineOptions({ name: 'AsamProgressBasicDemo' });
import { ref } from 'vue';
import { AsamButton, AsamProgress } from '@asam-ui/ui';
const value = ref(40);
</script>
<style scoped>
.demo-root-layout {
display: flex;
gap: var(--asam-space-md);
flex-wrap: wrap;
align-items: center;
}
.demo-root-layout > :is(p, pre, output) {
margin-block: 0;
}
</style>使用约定
percentage 使用 0～100；支持线形、环形、仪表盘及文字、颜色配置。 完整说明。
完整使用场景
直线进度条
Progress 组件设置 percentage 属性即可，表示进度条对应的百分比。该属性必填，并且必须在 0-100 的范围内。你可以通过设置 format 来自定义文字显示的格式。
直线进度条
<template>
<div class="demo-progress">
<AsamProgress :percentage="50" />
<AsamProgress :percentage="100" :format="format" />
<AsamProgress :percentage="100" status="success" />
<AsamProgress :percentage="100" status="warning" />
<AsamProgress :percentage="50" status="exception" />
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamProgressCapLinearProgressBarDemo' });
import { AsamProgress } from '@asam-ui/ui';
const format = (percentage: number) => (percentage === 100 ? '完整进度' : `${percentage}%`);
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
/* stylelint-enable selector-class-pattern */
</style><template>
<div class="demo-progress">
<AsamProgress :percentage="50" />
<AsamProgress :percentage="100" :format="format" />
<AsamProgress :percentage="100" status="success" />
<AsamProgress :percentage="100" status="warning" />
<AsamProgress :percentage="50" status="exception" />
</div>
</template>
<script setup>
defineOptions({ name: 'AsamProgressCapLinearProgressBarDemo' });
import { AsamProgress } from '@asam-ui/ui';
const format = (percentage) => (percentage === 100 ? '完整进度' : `${percentage}%`);
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
/* stylelint-enable selector-class-pattern */
</style>
进度条内显示百分比标识
百分比不占用额外空间，适用于文件上传等场景。
Progress 组件可通过 stroke-width 属性更改进度条的高度，并可通过 text-inside 属性来改变进度条内部的文字。
进度条内显示百分比标识
<template>
<div class="demo-progress">
<AsamProgress :text-inside="true" :stroke-width="26" :percentage="70" />
<AsamProgress :text-inside="true" :stroke-width="24" :percentage="100" status="success" />
<AsamProgress :text-inside="true" :stroke-width="22" :percentage="80" status="warning" />
<AsamProgress :text-inside="true" :stroke-width="20" :percentage="50" status="exception" />
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamProgressCapInternalPercentageDemo' });
import { AsamProgress } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
/* stylelint-enable selector-class-pattern */
</style><template>
<div class="demo-progress">
<AsamProgress :text-inside="true" :stroke-width="26" :percentage="70" />
<AsamProgress :text-inside="true" :stroke-width="24" :percentage="100" status="success" />
<AsamProgress :text-inside="true" :stroke-width="22" :percentage="80" status="warning" />
<AsamProgress :text-inside="true" :stroke-width="20" :percentage="50" status="exception" />
</div>
</template>
<script setup>
defineOptions({ name: 'AsamProgressCapInternalPercentageDemo' });
import { AsamProgress } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
/* stylelint-enable selector-class-pattern */
</style>
自定义进度条的颜色
可以通过 color 属性来设置进度条的颜色。该属性可以接受十六进制颜色值，函数和数组。
自定义进度条的颜色
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-progress">
<AsamProgress :percentage="percentage" :color="customColor" />
<AsamProgress :percentage="percentage" :color="customColorMethod" />
<AsamProgress :percentage="percentage" :color="customColors" />
<AsamProgress :percentage="percentage" :color="customColors" />
<div>
<AsamButtonGroup>
<AsamButton type="default" :icon="Minus" @click="decrease" />
<AsamButton type="default" :icon="Plus" @click="increase" />
</AsamButtonGroup>
</div>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamProgressCapCustomColorDemo' });
import { AsamProgress, AsamButtonGroup, AsamButton } from '@asam-ui/ui';
import { ref } from 'vue';
import { Minus, Plus } from '@asam-ui/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 increase = () => {
percentage.value += 10;
if (percentage.value > 100) {
percentage.value = 100;
}
};
const decrease = () => {
percentage.value -= 10;
if (percentage.value < 0) {
percentage.value = 0;
}
};
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
/* stylelint-enable selector-class-pattern */
</style><!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-progress">
<AsamProgress :percentage="percentage" :color="customColor" />
<AsamProgress :percentage="percentage" :color="customColorMethod" />
<AsamProgress :percentage="percentage" :color="customColors" />
<AsamProgress :percentage="percentage" :color="customColors" />
<div>
<AsamButtonGroup>
<AsamButton type="default" :icon="Minus" @click="decrease" />
<AsamButton type="default" :icon="Plus" @click="increase" />
</AsamButtonGroup>
</div>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamProgressCapCustomColorDemo' });
import { AsamProgress, AsamButtonGroup, AsamButton } from '@asam-ui/ui';
import { ref } from 'vue';
import { Minus, Plus } from '@asam-ui/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) => {
if (percentage < 30) {
return '#909399';
}
if (percentage < 70) {
return '#e6a23c';
}
return '#67c23a';
};
const increase = () => {
percentage.value += 10;
if (percentage.value > 100) {
percentage.value = 100;
}
};
const decrease = () => {
percentage.value -= 10;
if (percentage.value < 0) {
percentage.value = 0;
}
};
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
/* stylelint-enable selector-class-pattern */
</style>
环形进度条
Progress 组件可通过 type 属性来指定使用环形进度条，在环形进度条中，还可以通过 width 属性来设置其大小。
环形进度条
<template>
<div class="demo-progress">
<AsamProgress type="circle" :percentage="0" />
<AsamProgress type="circle" :percentage="25" />
<AsamProgress type="circle" :percentage="100" status="success" />
<AsamProgress type="circle" :percentage="70" status="warning" />
<AsamProgress type="circle" :percentage="50" status="exception" />
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamProgressCapCircularProgressBarDemo' });
import { AsamProgress } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demo-progress .el-progress--circle {
margin-right: 15px;
}
/* stylelint-enable selector-class-pattern */
</style><template>
<div class="demo-progress">
<AsamProgress type="circle" :percentage="0" />
<AsamProgress type="circle" :percentage="25" />
<AsamProgress type="circle" :percentage="100" status="success" />
<AsamProgress type="circle" :percentage="70" status="warning" />
<AsamProgress type="circle" :percentage="50" status="exception" />
</div>
</template>
<script setup>
defineOptions({ name: 'AsamProgressCapCircularProgressBarDemo' });
import { AsamProgress } from '@asam-ui/ui';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demo-progress .el-progress--circle {
margin-right: 15px;
}
/* stylelint-enable selector-class-pattern */
</style>
仪表盘形进度条
您也可以指定 type 属性到 dashboard 使用控制面板进度栏。
仪表盘形进度条
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-progress demo-layout-1">
<AsamProgress type="dashboard" :percentage="percentage" :color="colors" />
<AsamProgress type="dashboard" :percentage="percentage2" :color="colors" />
<div>
<AsamButtonGroup>
<AsamButton type="default" :icon="Minus" @click="decrease" />
<AsamButton type="default" :icon="Plus" @click="increase" />
</AsamButtonGroup>
</div>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamProgressCapDashboardProgressBarDemo' });
import { AsamProgress, AsamButtonGroup, AsamButton } from '@asam-ui/ui';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { Minus, Plus } from '@asam-ui/icons-vue';
const percentage = ref(10);
const percentage2 = ref(0);
const colors = [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 }
];
const increase = () => {
percentage.value += 10;
if (percentage.value > 100) {
percentage.value = 100;
}
};
const decrease = () => {
percentage.value -= 10;
if (percentage.value < 0) {
percentage.value = 0;
}
};
let interval: ReturnType<typeof setInterval> | undefined;
onMounted(() => {
interval = setInterval(() => {
percentage2.value = (percentage2.value % 100) + 10;
}, 500);
});
onBeforeUnmount(() => {
if (interval !== undefined) clearInterval(interval);
});
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
.demo-progress .el-progress--circle {
margin-right: 15px;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
.demo-layout-1 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
</style><!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-progress demo-layout-1">
<AsamProgress type="dashboard" :percentage="percentage" :color="colors" />
<AsamProgress type="dashboard" :percentage="percentage2" :color="colors" />
<div>
<AsamButtonGroup>
<AsamButton type="default" :icon="Minus" @click="decrease" />
<AsamButton type="default" :icon="Plus" @click="increase" />
</AsamButtonGroup>
</div>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamProgressCapDashboardProgressBarDemo' });
import { AsamProgress, AsamButtonGroup, AsamButton } from '@asam-ui/ui';
import { onBeforeUnmount, onMounted, ref } from 'vue';
import { Minus, Plus } from '@asam-ui/icons-vue';
const percentage = ref(10);
const percentage2 = ref(0);
const colors = [
{ color: '#f56c6c', percentage: 20 },
{ color: '#e6a23c', percentage: 40 },
{ color: '#5cb87a', percentage: 60 },
{ color: '#1989fa', percentage: 80 },
{ color: '#6f7ad3', percentage: 100 }
];
const increase = () => {
percentage.value += 10;
if (percentage.value > 100) {
percentage.value = 100;
}
};
const decrease = () => {
percentage.value -= 10;
if (percentage.value < 0) {
percentage.value = 0;
}
};
let interval;
onMounted(() => {
interval = setInterval(() => {
percentage2.value = (percentage2.value % 100) + 10;
}, 500);
});
onBeforeUnmount(() => {
if (interval !== undefined) clearInterval(interval);
});
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
.demo-progress .el-progress--circle {
margin-right: 15px;
}
/* stylelint-enable selector-class-pattern */
</style>
<style scoped>
.demo-layout-1 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--asam-space-md);
}
</style>
自定义内容
通过默认插槽添加自定义内容。
自定义内容
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-progress">
<AsamProgress :percentage="50">
<AsamButton type="default" text>内容</AsamButton>
</AsamProgress>
<AsamProgress :text-inside="true" :stroke-width="20" :percentage="50" status="exception">
<span>内容</span>
</AsamProgress>
<AsamProgress type="circle" :percentage="100" status="success">
<AsamButton type="default" :icon="Check" circle />
</AsamProgress>
<AsamProgress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">进行中</span>
</template>
</AsamProgress>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamProgressCapCustomizedContentDemo' });
import { AsamProgress, AsamButton } from '@asam-ui/ui';
import { Check } from '@asam-ui/icons-vue';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.percentage-value {
display: block;
margin-top: 10px;
font-size: 28px;
}
.percentage-label {
display: block;
margin-top: 10px;
font-size: 12px;
}
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
.demo-progress .el-progress--circle {
margin-right: 15px;
}
/* stylelint-enable selector-class-pattern */
</style><!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-progress">
<AsamProgress :percentage="50">
<AsamButton type="default" text>内容</AsamButton>
</AsamProgress>
<AsamProgress :text-inside="true" :stroke-width="20" :percentage="50" status="exception">
<span>内容</span>
</AsamProgress>
<AsamProgress type="circle" :percentage="100" status="success">
<AsamButton type="default" :icon="Check" circle />
</AsamProgress>
<AsamProgress type="dashboard" :percentage="80">
<template #default="{ percentage }">
<span class="percentage-value">{{ percentage }}%</span>
<span class="percentage-label">进行中</span>
</template>
</AsamProgress>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamProgressCapCustomizedContentDemo' });
import { AsamProgress, AsamButton } from '@asam-ui/ui';
import { Check } from '@asam-ui/icons-vue';
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.percentage-value {
display: block;
margin-top: 10px;
font-size: 28px;
}
.percentage-label {
display: block;
margin-top: 10px;
font-size: 12px;
}
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
.demo-progress .el-progress--circle {
margin-right: 15px;
}
/* stylelint-enable selector-class-pattern */
</style>
动画进度条
使用 indeterminate 属性来设置不确定的进度， duration 来控制动画持续时间。
动画进度条
<template>
<div class="demo-progress">
<AsamProgress :percentage="50" :indeterminate="true" />
<AsamProgress :percentage="100" :format="format" :indeterminate="true" />
<AsamProgress :percentage="100" status="success" :indeterminate="true" :duration="5" />
<AsamProgress :percentage="100" status="warning" :indeterminate="true" :duration="1" />
<AsamProgress :percentage="50" status="exception" :indeterminate="true" />
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamProgressCapIndeterminateProgressDemo' });
import { AsamProgress } from '@asam-ui/ui';
const format = (percentage: number) => (percentage === 100 ? '完整进度' : `${percentage}%`);
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
/* stylelint-enable selector-class-pattern */
</style><template>
<div class="demo-progress">
<AsamProgress :percentage="50" :indeterminate="true" />
<AsamProgress :percentage="100" :format="format" :indeterminate="true" />
<AsamProgress :percentage="100" status="success" :indeterminate="true" :duration="5" />
<AsamProgress :percentage="100" status="warning" :indeterminate="true" :duration="1" />
<AsamProgress :percentage="50" status="exception" :indeterminate="true" />
</div>
</template>
<script setup>
defineOptions({ name: 'AsamProgressCapIndeterminateProgressDemo' });
import { AsamProgress } from '@asam-ui/ui';
const format = (percentage) => (percentage === 100 ? '完整进度' : `${percentage}%`);
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
/* stylelint-enable selector-class-pattern */
</style>
条纹进度条
通过设置 striped 属性获取条纹进度条。也可以使用 striped-flow 属性来使条纹流动起来。 使用duration 属性来控制条纹流动的速度。
条纹进度条
<!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-progress">
<AsamProgress :percentage="50" :stroke-width="15" striped />
<AsamProgress :percentage="30" :stroke-width="15" status="warning" striped striped-flow />
<AsamProgress
:percentage="100"
:stroke-width="15"
status="success"
striped
striped-flow
:duration="10"
/>
<AsamProgress
:percentage="percentage"
:stroke-width="15"
status="exception"
striped
striped-flow
:duration="duration"
/>
<AsamButtonGroup>
<AsamButton type="default" :icon="Minus" @click="decrease" />
<AsamButton type="default" :icon="Plus" @click="increase" />
</AsamButtonGroup>
</div>
</template>
<script lang="ts" setup>
defineOptions({ name: 'AsamProgressCapStripedProgressDemo' });
import { AsamProgress, AsamButtonGroup, AsamButton } from '@asam-ui/ui';
import { computed, ref } from 'vue';
import { Minus, Plus } from '@asam-ui/icons-vue';
const percentage = ref<number>(70);
const duration = computed(() => Math.floor(percentage.value / 10));
const increase = () => {
percentage.value += 10;
if (percentage.value > 100) {
percentage.value = 100;
}
};
const decrease = () => {
percentage.value -= 10;
if (percentage.value < 0) {
percentage.value = 0;
}
};
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
/* stylelint-enable selector-class-pattern */
</style><!-- 此演示还使用 @asam-ui/icons-vue，请按官网对应指南配置这些公开依赖。 -->
<template>
<div class="demo-progress">
<AsamProgress :percentage="50" :stroke-width="15" striped />
<AsamProgress :percentage="30" :stroke-width="15" status="warning" striped striped-flow />
<AsamProgress
:percentage="100"
:stroke-width="15"
status="success"
striped
striped-flow
:duration="10"
/>
<AsamProgress
:percentage="percentage"
:stroke-width="15"
status="exception"
striped
striped-flow
:duration="duration"
/>
<AsamButtonGroup>
<AsamButton type="default" :icon="Minus" @click="decrease" />
<AsamButton type="default" :icon="Plus" @click="increase" />
</AsamButtonGroup>
</div>
</template>
<script setup>
defineOptions({ name: 'AsamProgressCapStripedProgressDemo' });
import { AsamProgress, AsamButtonGroup, AsamButton } from '@asam-ui/ui';
import { computed, ref } from 'vue';
import { Minus, Plus } from '@asam-ui/icons-vue';
const percentage = ref(70);
const duration = computed(() => Math.floor(percentage.value / 10));
const increase = () => {
percentage.value += 10;
if (percentage.value > 100) {
percentage.value = 100;
}
};
const decrease = () => {
percentage.value -= 10;
if (percentage.value < 0) {
percentage.value = 0;
}
};
</script>
<style scoped>
/* stylelint-disable selector-class-pattern -- Base-component BEM selectors are required for this demonstration. */
.demo-progress .el-progress--line {
margin-bottom: 15px;
max-width: 600px;
}
/* stylelint-enable selector-class-pattern */
</style>API
属性 AsamProgressProps
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
type | 进度条类型。 | enum"circle" | "line" | "dashboard"完整类型："circle" | "line" | "dashboard" | undefined | "line" |
percentage | 进度百分比，必填。 | number | undefined | 0 |
status | 进度条当前状态 | enum"" | "success" | "warning" | "exception"完整类型："" | "success" | "warning" | "exception" | undefined | "" |
indeterminate | 是否为动画进度条 | boolean | undefined | false |
duration | 控制动画进度条速度和条纹进度条流动速度 | number | undefined | 3 |
strokeWidth | 进度条的宽度 | number | undefined | 6 |
strokeLinecap | 路径端点形状，支持 butt、circle、dashboard。 | enum"inherit" | "square" | "butt" | "round"完整类型：NonNullable<"inherit" | "square" | "butt" | "round" | undefined> | undefined | "round" |
textInside | 进度条显示文字内置在进度条内（仅 type 为 'line' 时可用） | boolean | undefined | false |
width | 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用） | number | undefined | 126 |
showText | 是否显示进度条文字内容 | boolean | undefined | true |
color | 进度条背景色（会覆盖 status 状态颜色） | string | AsamProgressColor[] | AsamProgressFn | undefined | "" |
striped | 在进度条上增加条纹 | boolean | undefined | false |
stripedFlow | 让进度条上的条纹流动起来 | boolean | undefined | false |
format | 指定进度条文字内容 | AsamProgressFn | undefined | 函数默认值（作为值传递） |
key | — | PropertyKey | undefined | — |
ref | — | VNodeRef | undefined | — |
ref_for | — | boolean | undefined | — |
ref_key | — | string | undefined | — |
onVnodeBeforeMount | — | (AsamProgressProps)["onVnodeBeforeMount"] | — |
onVnodeMounted | — | (AsamProgressProps)["onVnodeMounted"] | — |
onVnodeBeforeUpdate | — | (AsamProgressProps)["onVnodeBeforeUpdate"] | — |
onVnodeUpdated | — | (AsamProgressProps)["onVnodeUpdated"] | — |
onVnodeBeforeUnmount | — | (AsamProgressProps)["onVnodeBeforeUnmount"] | — |
onVnodeUnmounted | — | (AsamProgressProps)["onVnodeUnmounted"] | — |
class | — | unknown | — |
style | — | unknown | — |
实例方法与状态 AsamProgressExpose
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
$ | — | AsamProgressExpose["$"] | — |
$data | — | AsamTableColumnExpose | — |
$props | — | AsamProgressProps | — |
$attrs | — | AsamProgressExpose["$attrs"] | — |
$refs | — | AsamProgressExpose["$refs"] | — |
$slots | — | AsamProgressSlots | — |
$root | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$parent | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$host | — | Element | null | — |
$emit | — | (event: string, ...args: any[]) => void | — |
$el | — | any | — |
$options | — | (AsamProgressExpose)["$options"] | — |
$forceUpdate | — | () => void | — |
$nextTick | — | (AsamProgressExpose)["$nextTick"] | — |
$watch | — | (AsamProgressExpose)["$watch"] | — |
type | — | enum"circle" | "line" | "dashboard"完整类型："circle" | "line" | "dashboard" | — |
format | — | AsamProgressFn | — |
width | — | number | — |
color | — | string | AsamProgressColor[] | AsamProgressFn | — |
strokeLinecap | — | enum"inherit" | "square" | "butt" | "round"完整类型：NonNullable<"inherit" | "square" | "butt" | "round" | undefined> | — |
strokeWidth | — | number | — |
percentage | — | number | — |
status | — | enum"" | "success" | "warning" | "exception"完整类型："" | "success" | "warning" | "exception" | — |
duration | — | number | — |
showText | — | boolean | — |
indeterminate | 是否为动画进度条 | boolean | undefined | — |
textInside | 进度条显示文字内置在进度条内（仅 type 为 'line' 时可用） | boolean | undefined | — |
striped | 在进度条上增加条纹 | boolean | undefined | — |
stripedFlow | 让进度条上的条纹流动起来 | boolean | undefined | — |
$route | 当前规范化路由位置，详见 RouteLocationNormalizedLoaded。 | AsamProgressExpose["$route"] | — |
$router | 应用使用的 Router 实例。 | AsamProgressExpose["$router"] | — |
类型 AsamProgressInstance
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
$ | — | AsamProgressExpose["$"] | — |
$data | — | AsamTableColumnExpose | — |
$props | — | AsamProgressProps | — |
$attrs | — | AsamProgressExpose["$attrs"] | — |
$refs | — | AsamProgressExpose["$refs"] | — |
$slots | — | AsamProgressSlots | — |
$root | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$parent | — | 查看完整类型ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null | — |
$host | — | Element | null | — |
$emit | — | (event: string, ...args: any[]) => void | — |
$el | — | any | — |
$options | — | (AsamProgressInstance)["$options"] | — |
$forceUpdate | — | () => void | — |
$nextTick | — | (AsamProgressInstance)["$nextTick"] | — |
$watch | — | (AsamProgressInstance)["$watch"] | — |
type | — | enum"circle" | "line" | "dashboard"完整类型："circle" | "line" | "dashboard" | — |
format | — | AsamProgressFn | — |
width | — | number | — |
color | — | string | AsamProgressColor[] | AsamProgressFn | — |
strokeLinecap | — | enum"inherit" | "square" | "butt" | "round"完整类型：NonNullable<"inherit" | "square" | "butt" | "round" | undefined> | — |
strokeWidth | — | number | — |
percentage | — | number | — |
status | — | enum"" | "success" | "warning" | "exception"完整类型："" | "success" | "warning" | "exception" | — |
duration | — | number | — |
showText | — | boolean | — |
indeterminate | 是否为动画进度条 | boolean | undefined | — |
textInside | 进度条显示文字内置在进度条内（仅 type 为 'line' 时可用） | boolean | undefined | — |
striped | 在进度条上增加条纹 | boolean | undefined | — |
stripedFlow | 让进度条上的条纹流动起来 | boolean | undefined | — |
$route | 当前规范化路由位置，详见 RouteLocationNormalizedLoaded。 | AsamProgressExpose["$route"] | — |
$router | 应用使用的 Router 实例。 | AsamProgressExpose["$router"] | — |
插槽 AsamProgressSlots
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
default | — | (AsamProgressSlots)["default"] | — |
类型 AsamProgressColor
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
color | — | string | — |
percentage | — | number | — |
类型 AsamProgressFn
(percentage: number): string类型 AsamProgressPropsPublic
| 属性名 | 说明 | 类型 | 默认值 |
|---|---|---|---|
width | — | number | undefined | — |
type | — | enum"circle" | "line" | "dashboard"完整类型：(AsamProgressPropsPublic)["type"] | — |
duration | — | number | undefined | — |
color | — | (AsamProgressPropsPublic)["color"] | — |
format | — | AsamProgressFn | undefined | — |
percentage | — | number | undefined | — |
status | — | enum"" | "success" | "warning" | "exception"完整类型：(AsamProgressPropsPublic)["status"] | — |
indeterminate | — | boolean | undefined | — |
strokeWidth | — | number | undefined | — |
strokeLinecap | — | enum"inherit" | "square" | "butt" | "round"完整类型：(AsamProgressPropsPublic)["strokeLinecap"] | — |
textInside | — | boolean | undefined | — |
showText | — | (AsamProgressPropsPublic)["showText"] | — |
striped | — | boolean | undefined | — |
stripedFlow | — | boolean | undefined | — |
更多参数与事件说明
使用约定
percentage 应在 0 到 100 范围内；type 支持 line/circle/dashboard，status、color、format、showText、textInside 和 strokeWidth 设置呈现。indeterminate/stripedFlow 适用于明确的进行中状态。width 是圆形几何尺寸，不属于四档密度；实际任务与取消操作由宿主处理。
关联组件
参数与事件补充说明
公开绑定参数，包含具备类型的事件监听器；默认值由运行时定义提供。
参数与事件说明
type
必填：否；声明来源：上游声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："circle" / "line" / "dashboard"
默认值与来源
"line"（已安装运行时；已安装组件）固定上游文档默认：line（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'line'（2.14.7；源码事实，未作为 ASAM 运行实测）
percentage
必填：否；声明来源：上游声明。
默认值与来源
0（已安装运行时；已安装组件）固定上游文档默认：0（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
status
必填：否；声明来源：上游声明。
status 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "success" / "warning" / "exception"
默认值与来源
""（已安装运行时；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
indeterminate
必填：否；声明来源：上游声明。
indeterminate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
duration
必填：否；声明来源：上游声明。
默认值与来源
3（已安装运行时；已安装组件）固定上游文档默认：3（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：3（2.14.7；源码事实，未作为 ASAM 运行实测）
strokeWidth
必填：否；声明来源：上游声明。
默认值与来源
6（已安装运行时；已安装组件）固定上游文档默认：6（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：6（2.14.7；源码事实，未作为 ASAM 运行实测）
strokeLinecap
必填：否；声明来源：上游声明。
strokeLinecap 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："inherit" / "square" / "butt" / "round"
默认值与来源
"round"（已安装运行时；已安装组件）固定上游文档默认：round（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：'round'（2.14.7；源码事实，未作为 ASAM 运行实测）
textInside
必填：否；声明来源：上游声明。
textInside 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
width
必填：否；声明来源：上游声明。
默认值与来源
126（已安装运行时；已安装组件）固定上游文档默认：126（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：126（2.14.7；源码事实，未作为 ASAM 运行实测）
showText
必填：否；声明来源：上游声明。
showText 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
true（已安装运行时；已安装组件）固定上游文档默认：true（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
color
必填：否；声明来源：上游声明。
color 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(percentage: number): string
默认值与来源
""（已安装运行时；已安装组件）固定上游文档默认：''（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
striped
必填：否；声明来源：上游声明。
striped 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
stripedFlow
必填：否；声明来源：上游声明。
stripedFlow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
false（隐式 Boolean 默认；已安装组件）固定上游文档默认：false（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
format
必填：否；声明来源：上游声明。
format 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(percentage: number): string
默认值与来源
函数默认值（作为值传递）（函数值（不执行）；已安装组件）固定上游文档默认：未声明（2.14.7；文档事实，实际默认以 ASAM 源码 / 安装包为准）
固定上游源码函数默认值（作为值，不执行）：(percentage: number): string => `${percentage}%`（2.14.7；源码事实，未作为 ASAM 运行实测）
key
必填：否；声明来源：依赖声明。
ref
必填：否；声明来源：依赖声明。
ref 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(ref: Element | ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null, refs: Record<string, any>): void
ref.value:any— 依赖声明ref.__@RefSymbol@8854:true— 依赖声明仅用于区分类型：保留在公开声明中，通过私有 Symbol 避免出现在编辑器自动补全中。
枚举：
true
ref_for
必填：否；声明来源：依赖声明。
ref_for 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
ref_key
必填：否；声明来源：依赖声明。
onVnodeBeforeMount
必填：否；声明来源：依赖声明。
onVnodeBeforeMount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeMounted
必填：否；声明来源：依赖声明。
onVnodeMounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeBeforeUpdate
必填：否；声明来源：依赖声明。
onVnodeBeforeUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeUpdated
必填：否；声明来源：依赖声明。
onVnodeUpdated 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>, oldVNode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeBeforeUnmount
必填：否；声明来源：依赖声明。
onVnodeBeforeUnmount 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
onVnodeUnmounted
必填：否；声明来源：依赖声明。
onVnodeUnmounted 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(vnode: VNode<RendererNode, RendererElement, { [key: string]: any; }>): void
class
必填：否；声明来源：依赖声明。
style
必填：否；声明来源：依赖声明。
AsamProgressProps 公开类型视图
import type { VNodeRef, ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, VNode, RendererNode, RendererElement } from 'vue';
import type { AsamProgressProps, AsamProgressColor, AsamProgressFn, AsamProgressExpose } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamProgressProps
type PublicContract = {
readonly "type"?: "circle" | "line" | "dashboard" | undefined;
readonly "percentage"?: number | undefined;
readonly "status"?: "" | "success" | "warning" | "exception" | undefined;
readonly "indeterminate"?: boolean | undefined;
readonly "duration"?: number | undefined;
readonly "strokeWidth"?: number | undefined;
readonly "strokeLinecap"?: NonNullable<"inherit" | "square" | "butt" | "round" | undefined> | undefined;
readonly "textInside"?: boolean | undefined;
readonly "width"?: number | undefined;
readonly "showText"?: boolean | undefined;
readonly "color"?: string | AsamProgressColor[] | AsamProgressFn | undefined;
readonly "striped"?: boolean | undefined;
readonly "stripedFlow"?: boolean | undefined;
readonly "format"?: AsamProgressFn | undefined;
"key"?: PropertyKey | undefined;
"ref"?: VNodeRef | undefined;
"ref_for"?: boolean | undefined;
"ref_key"?: string | undefined;
"onVnodeBeforeMount"?: (AsamProgressProps)["onVnodeBeforeMount"];
"onVnodeMounted"?: (AsamProgressProps)["onVnodeMounted"];
"onVnodeBeforeUpdate"?: (AsamProgressProps)["onVnodeBeforeUpdate"];
"onVnodeUpdated"?: (AsamProgressProps)["onVnodeUpdated"];
"onVnodeBeforeUnmount"?: (AsamProgressProps)["onVnodeBeforeUnmount"];
"onVnodeUnmounted"?: (AsamProgressProps)["onVnodeUnmounted"];
"class"?: unknown;
"style"?: unknown;
};完整的上游实例，包含全部公开方法与响应式状态。
参数与事件说明
$
必填：是；声明来源：依赖声明。
$ 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$data
必填：是；声明来源：依赖声明。
$props
必填：是；声明来源：依赖声明。
$attrs
必填：是；声明来源：依赖声明。
$attrs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$refs
必填：是；声明来源：依赖声明。
$refs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$slots
必填：是；声明来源：依赖声明。
$root
必填：是；声明来源：依赖声明。
$parent
必填：是；声明来源：依赖声明。
$host
必填：是；声明来源：依赖声明。
$host 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
$emit
必填：是；声明来源：依赖声明。
$emit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: string, ...args: any[]): void
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$el
必填：是；声明来源：依赖声明。
$options
必填：是；声明来源：依赖声明。
$forceUpdate
必填：是；声明来源：依赖声明。
$forceUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$nextTick
必填：是；声明来源：依赖声明。
$nextTick 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): Promise<void>
事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$watch
必填：是；声明来源：依赖声明。
$watch 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamProgressExpose)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
type
必填：是；声明来源：上游声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："circle" / "line" / "dashboard"
format
必填：是；声明来源：上游声明。
format 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(percentage: number): string
width
必填：是；声明来源：上游声明。
color
必填：是；声明来源：上游声明。
color 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(percentage: number): string
strokeLinecap
必填：是；声明来源：上游声明。
strokeLinecap 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："inherit" / "square" / "butt" / "round"
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
strokeWidth
必填：是；声明来源：上游声明。
percentage
必填：是；声明来源：上游声明。
status
必填：是；声明来源：上游声明。
status 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "success" / "warning" / "exception"
duration
必填：是；声明来源：上游声明。
showText
必填：是；声明来源：上游声明。
showText 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
indeterminate
必填：否；声明来源：上游声明。
indeterminate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
textInside
必填：否；声明来源：上游声明。
textInside 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
striped
必填：否；声明来源：上游声明。
striped 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
stripedFlow
必填：否；声明来源：上游声明。
stripedFlow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
$route
必填：是；声明来源：依赖声明。
$route 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$route.matched:(NonNullable<AsamProgressExpose["$route"]>)["matched"]— 依赖声明仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name:(NonNullable<AsamProgressExpose["$route"]>)["name"]— 依赖声明匹配路由记录的名称。
$route.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query:(NonNullable<AsamProgressExpose["$route"]>)["query"]— 依赖声明当前位置 search 属性的对象表示。
$route.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom:(NonNullable<AsamProgressExpose["$route"]>)["redirectedFrom"]— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
$route.redirectedFrom.matched:PublicMember<NonNullable<(NonNullable<AsamProgressExpose["$route"]>)["redirectedFrom"]>, "matched">— 依赖声明包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.redirectedFrom.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.redirectedFrom.query:PublicMember<NonNullable<(NonNullable<AsamProgressExpose["$route"]>)["redirectedFrom"]>, "query">— 依赖声明当前位置 search 属性的对象表示。
$route.redirectedFrom.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom.redirectedFrom:PublicMember<NonNullable<(NonNullable<AsamProgressExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom">— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
嵌套展开边界：递归引用；完整类型见公开类型视图。
$route.redirectedFrom.name:PublicMember<NonNullable<(NonNullable<AsamProgressExpose["$route"]>)["redirectedFrom"]>, "name">— 依赖声明匹配路由记录的名称。
$route.redirectedFrom.meta:PublicMember<NonNullable<(NonNullable<AsamProgressExpose["$route"]>)["redirectedFrom"]>, "meta">— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.redirectedFrom.params:PublicMember<NonNullable<(NonNullable<AsamProgressExpose["$route"]>)["redirectedFrom"]>, "params">— 依赖声明从 path 提取并解码后的参数对象。
$route.redirectedFrom.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$route.redirectedFrom.replace:boolean | undefined— 依赖声明替换当前历史记录，而不是添加新记录。
枚举：
false/true$route.redirectedFrom.force:boolean | undefined— 依赖声明即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
枚举：
false/true$route.redirectedFrom.state:PublicMember<NonNullable<(NonNullable<AsamProgressExpose["$route"]>)["redirectedFrom"]>, "state">— 依赖声明通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta:(NonNullable<AsamProgressExpose["$route"]>)["meta"]— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.params:(NonNullable<AsamProgressExpose["$route"]>)["params"]— 依赖声明从 path 提取并解码后的参数对象。
$route.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$router
必填：是；声明来源：依赖声明。
$router 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$router.options:(NonNullable<AsamProgressExpose["$router"]>)["options"]— 依赖声明创建路由器时传入的原始配置对象。
$router.options.routes:(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["routes"]— 依赖声明需要添加到路由器的初始路由列表。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.options.history:(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["history"]— 依赖声明路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
$router.options.history.base:string— 依赖声明添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.location:string— 依赖声明当前历史记录位置。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.state:(NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["history"]>)["state"]— 依赖声明当前历史记录状态。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.push:(NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["history"]>)["push"]— 依赖声明导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.replace:(NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["history"]>)["replace"]— 依赖声明与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.go:(delta: number, triggerListeners?: boolean) => void— 依赖声明按指定方向遍历历史记录。
事件参数：
(delta: number, triggerListeners?: boolean | undefined): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.listen:(NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["history"]>)["listen"]— 依赖声明为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
事件参数：
(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.createHref:(location: AsamProgressColor["color"]) => string— 依赖声明生成用于链接元素的对应 href。
事件参数：
(location: string): string嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.destroy:() => void— 依赖声明清除历史记录实现注册的全部事件监听器。
事件参数：
(): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.scrollBehavior:(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["scrollBehavior"]— 依赖声明控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamProgressExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>$router.options.parseQuery:(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["parseQuery"]— 依赖声明自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
事件参数：
(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>$router.options.stringifyQuery:(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["stringifyQuery"]— 依赖声明自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
事件参数：
(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string$router.options.linkActiveClass:string | undefined— 依赖声明应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
$router.options.linkExactActiveClass:string | undefined— 依赖声明应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
$router.options.end:boolean | undefined— 依赖声明是否在表达式末尾添加 $，使其匹配到路径结尾。
声明默认：
`true`（注释，实际运行默认以源码/安装包为准）枚举：
false/true$router.options.sensitive:boolean | undefined— 依赖声明使正则表达式区分大小写。
声明默认：
`false`（注释，实际运行默认以源码/安装包为准）枚举：
false/true$router.options.strict:boolean | undefined— 依赖声明是否禁止路径末尾的斜杠。
声明默认：
`false`（注释，实际运行默认以源码/安装包为准）枚举：
false/true
$router.addRoute:(NonNullable<AsamProgressExpose["$router"]>)["addRoute"]— 依赖声明向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute:(NonNullable<AsamProgressExpose["$router"]>)["removeRoute"]— 依赖声明按名称移除已有路由。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void$router.clearRoutes:() => void— 依赖声明从路由器中删除全部路由。
事件参数：
(): void$router.currentRoute:ShallowRef<AsamProgressExpose["$route"]>— 依赖声明当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening:boolean— 依赖声明允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：
false/true$router.hasRoute:(NonNullable<AsamProgressExpose["$router"]>)["hasRoute"]— 依赖声明检查指定名称的路由是否存在。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean$router.getRoutes:(NonNullable<AsamProgressExpose["$router"]>)["getRoutes"]— 依赖声明获取全部 RouteRecord 路由记录的完整列表。
事件参数：
(): ReturnType<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>$router.resolve:(NonNullable<AsamProgressExpose["$router"]>)["resolve"]— 依赖声明返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push:(NonNullable<AsamProgressExpose["$router"]>)["push"]— 依赖声明通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>$router.replace:(NonNullable<AsamProgressExpose["$router"]>)["replace"]— 依赖声明通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>$router.back:() => void— 依赖声明通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：
(): void$router.forward:() => void— 依赖声明通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：
(): void$router.go:(delta: number) => void— 依赖声明通过调用 history.go() 在历史记录中前进或后退。
事件参数：
(delta: number): void$router.beforeEach:(NonNullable<AsamProgressExpose["$router"]>)["beforeEach"]— 依赖声明添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.beforeResolve:(NonNullable<AsamProgressExpose["$router"]>)["beforeResolve"]— 依赖声明添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void$router.afterEach:(NonNullable<AsamProgressExpose["$router"]>)["afterEach"]— 依赖声明添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.onError:(NonNullable<AsamProgressExpose["$router"]>)["onError"]— 依赖声明添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：
(handler: Parameters<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void$router.isReady:() => Promise<void>— 依赖声明返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：
(): Promise<void>$router.install:(app: App) => void— 依赖声明由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：
(app: App<any>): void
AsamProgressExpose 公开类型视图
import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamProgressExpose, AsamTableColumnExpose, AsamProgressProps, AsamProgressSlots, AsamProgressColor, AsamProgressFn } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamProgressExpose
type PublicContract = {
"$": AsamProgressExpose["$"];
"$data": AsamTableColumnExpose;
"$props": AsamProgressProps;
"$attrs": AsamProgressExpose["$attrs"];
"$refs": AsamProgressExpose["$refs"];
"$slots": AsamProgressSlots;
"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$host": Element | null;
"$emit": (event: string, ...args: any[]) => void;
"$el": any;
"$options": (AsamProgressExpose)["$options"];
"$forceUpdate": () => void;
"$nextTick": (AsamProgressExpose)["$nextTick"];
"$watch": (AsamProgressExpose)["$watch"];
readonly "type": "circle" | "line" | "dashboard";
readonly "format": AsamProgressFn;
readonly "width": number;
readonly "color": string | AsamProgressColor[] | AsamProgressFn;
readonly "strokeLinecap": NonNullable<"inherit" | "square" | "butt" | "round" | undefined>;
readonly "strokeWidth": number;
readonly "percentage": number;
readonly "status": "" | "success" | "warning" | "exception";
readonly "duration": number;
readonly "showText": boolean;
readonly "indeterminate"?: boolean | undefined;
readonly "textInside"?: boolean | undefined;
readonly "striped"?: boolean | undefined;
readonly "stripedFlow"?: boolean | undefined;
"$route": AsamProgressExpose["$route"];
"$router": AsamProgressExpose["$router"];
};参数与事件说明
$
必填：是；声明来源：依赖声明。
$ 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$data
必填：是；声明来源：依赖声明。
$props
必填：是；声明来源：依赖声明。
$attrs
必填：是；声明来源：依赖声明。
$attrs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$refs
必填：是；声明来源：依赖声明。
$refs 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$slots
必填：是；声明来源：依赖声明。
$root
必填：是；声明来源：依赖声明。
$parent
必填：是；声明来源：依赖声明。
$host
必填：是；声明来源：依赖声明。
$host 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
嵌套展开边界：大型实例类型；完整类型见公开类型视图。
$emit
必填：是；声明来源：依赖声明。
$emit 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(event: string, ...args: any[]): void
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$el
必填：是；声明来源：依赖声明。
$options
必填：是；声明来源：依赖声明。
$forceUpdate
必填：是；声明来源：依赖声明。
$forceUpdate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): void
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$nextTick
必填：是；声明来源：依赖声明。
$nextTick 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(): Promise<void>
事件参数：<T, R>(this: T, fn: (this: T) => R | Promise<R>): Promise<R>
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$watch
必填：是；声明来源：依赖声明。
$watch 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：<T extends string | ((...args: any) => any)>(source: T, cb: Parameters<Extract<NonNullable<(AsamProgressInstance)["$watch"]>, (...args: never[]) => unknown>>[1], options?: WatchOptions<boolean> | undefined): WatchStopHandle
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
type
必填：是；声明来源：上游声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："circle" / "line" / "dashboard"
format
必填：是；声明来源：上游声明。
format 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(percentage: number): string
width
必填：是；声明来源：上游声明。
color
必填：是；声明来源：上游声明。
color 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(percentage: number): string
strokeLinecap
必填：是；声明来源：上游声明。
strokeLinecap 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："inherit" / "square" / "butt" / "round"
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
strokeWidth
必填：是；声明来源：上游声明。
percentage
必填：是；声明来源：上游声明。
status
必填：是；声明来源：上游声明。
status 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "success" / "warning" / "exception"
duration
必填：是；声明来源：上游声明。
showText
必填：是；声明来源：上游声明。
showText 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
indeterminate
必填：否；声明来源：上游声明。
indeterminate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
textInside
必填：否；声明来源：上游声明。
textInside 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
striped
必填：否；声明来源：上游声明。
striped 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
stripedFlow
必填：否；声明来源：上游声明。
stripedFlow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
$route
必填：是；声明来源：依赖声明。
$route 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$route.matched:(NonNullable<AsamProgressExpose["$route"]>)["matched"]— 依赖声明仅包含普通组件的 RouteLocationMatched 数组；懒加载组件已解析并替换 components 中的值，可直接展示路由，不包含重定向记录。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.name:(NonNullable<AsamProgressExpose["$route"]>)["name"]— 依赖声明匹配路由记录的名称。
$route.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.query:(NonNullable<AsamProgressExpose["$route"]>)["query"]— 依赖声明当前位置 search 属性的对象表示。
$route.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom:(NonNullable<AsamProgressExpose["$route"]>)["redirectedFrom"]— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
$route.redirectedFrom.matched:PublicMember<NonNullable<(NonNullable<AsamProgressExpose["$route"]>)["redirectedFrom"]>, "matched">— 依赖声明包含添加路由时原始组件的 RouteRecord 数组，也可能包含重定向记录，不能直接用于展示。此属性不可枚举。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$route.redirectedFrom.fullPath:string— 依赖声明包含 search 和 hash 的完整位置字符串，使用百分号编码。
$route.redirectedFrom.query:PublicMember<NonNullable<(NonNullable<AsamProgressExpose["$route"]>)["redirectedFrom"]>, "query">— 依赖声明当前位置 search 属性的对象表示。
$route.redirectedFrom.hash:string— 依赖声明当前位置的哈希片段；存在时以 # 开头。
$route.redirectedFrom.redirectedFrom:PublicMember<NonNullable<(NonNullable<AsamProgressExpose["$route"]>)["redirectedFrom"]>, "redirectedFrom">— 依赖声明最终到达当前位置之前，最初尝试访问的位置。
嵌套展开边界：递归引用；完整类型见公开类型视图。
$route.redirectedFrom.name:PublicMember<NonNullable<(NonNullable<AsamProgressExpose["$route"]>)["redirectedFrom"]>, "name">— 依赖声明匹配路由记录的名称。
$route.redirectedFrom.meta:PublicMember<NonNullable<(NonNullable<AsamProgressExpose["$route"]>)["redirectedFrom"]>, "meta">— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.redirectedFrom.params:PublicMember<NonNullable<(NonNullable<AsamProgressExpose["$route"]>)["redirectedFrom"]>, "params">— 依赖声明从 path 提取并解码后的参数对象。
$route.redirectedFrom.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$route.redirectedFrom.replace:boolean | undefined— 依赖声明替换当前历史记录，而不是添加新记录。
枚举：
false/true$route.redirectedFrom.force:boolean | undefined— 依赖声明即使目标与当前位置相同，也触发导航；除非传入 replace: true，否则会添加一条历史记录。
枚举：
false/true$route.redirectedFrom.state:PublicMember<NonNullable<(NonNullable<AsamProgressExpose["$route"]>)["redirectedFrom"]>, "state">— 依赖声明通过 History API 保存的状态；不能包含响应式值，也不允许 Symbol 等部分值。详情参见 https://developer.mozilla.org/zh-CN/docs/Web/API/History/state。
$route.meta:(NonNullable<AsamProgressExpose["$route"]>)["meta"]— 依赖声明全部匹配路由记录合并后的 meta 属性。
$route.params:(NonNullable<AsamProgressExpose["$route"]>)["params"]— 依赖声明从 path 提取并解码后的参数对象。
$route.path:string— 依赖声明URL 中经过百分号编码的路径部分。
$router
必填：是；声明来源：依赖声明。
$router 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
$router.options:(NonNullable<AsamProgressExpose["$router"]>)["options"]— 依赖声明创建路由器时传入的原始配置对象。
$router.options.routes:(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["routes"]— 依赖声明需要添加到路由器的初始路由列表。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.options.history:(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["history"]— 依赖声明路由器使用的历史记录实现。通常使用 createWebHistory，并配置服务器回退；createWebHashHistory 无需服务器配置，但搜索引擎无法处理其哈希路由，影响搜索优化。
$router.options.history.base:string— 依赖声明添加到每个 URL 前的基础路径；例如 base 为 /sub-folder 时，可将单页应用部署在域名的对应子目录。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.location:string— 依赖声明当前历史记录位置。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.state:(NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["history"]>)["state"]— 依赖声明当前历史记录状态。
嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.push:(NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["history"]>)["push"]— 依赖声明导航到指定位置；使用 HTML5 History 时，通过 history.pushState 实际更新 URL。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["history"]>)["push"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.replace:(NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["history"]>)["replace"]— 依赖声明与 RouterHistory.push 类似，但调用 history.replaceState，而非 history.pushState。
事件参数：
(to: string, data?: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["history"]>)["replace"]>, (...args: never[]) => unknown>>[1]): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.go:(delta: number, triggerListeners?: boolean) => void— 依赖声明按指定方向遍历历史记录。
事件参数：
(delta: number, triggerListeners?: boolean | undefined): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.listen:(NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["history"]>)["listen"]— 依赖声明为历史记录实现添加监听器；由浏览器前进、后退等外部导航，或传入 true 的 RouterHistory.back、RouterHistory.forward 触发。
事件参数：
(callback: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["history"]>)["listen"]>, (...args: never[]) => unknown>>[0]): () => void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.createHref:(location: AsamProgressColor["color"]) => string— 依赖声明生成用于链接元素的对应 href。
事件参数：
(location: string): string嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.history.destroy:() => void— 依赖声明清除历史记录实现注册的全部事件监听器。
事件参数：
(): void嵌套展开边界：深度上限；完整类型见公开类型视图。
$router.options.scrollBehavior:(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["scrollBehavior"]— 依赖声明控制页面导航时滚动行为的函数；可返回 Promise 延迟滚动。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[0], from: AsamProgressExpose["$route"], savedPosition: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>[2]): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["scrollBehavior"]>, (...args: never[]) => unknown>>$router.options.parseQuery:(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["parseQuery"]— 依赖声明自定义查询参数解析函数；与 EXPERIMENTAL_RouterOptions_Base.stringifyQuery 配套。
事件参数：
(search: string): ReturnType<Extract<NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["parseQuery"]>, (...args: never[]) => unknown>>$router.options.stringifyQuery:(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["stringifyQuery"]— 依赖声明自定义查询对象序列化函数；不要添加开头的 ?，与 parseQuery 的解析函数配套。
事件参数：
(query: Parameters<Extract<NonNullable<(NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["options"]>)["stringifyQuery"]>, (...args: never[]) => unknown>>[0]): string$router.options.linkActiveClass:string | undefined— 依赖声明应用于激活 RouterLink 的默认类名；未指定时使用 router-link-active。
$router.options.linkExactActiveClass:string | undefined— 依赖声明应用于精确激活 RouterLink 的默认类名；未指定时使用 router-link-exact-active。
$router.options.end:boolean | undefined— 依赖声明是否在表达式末尾添加 $，使其匹配到路径结尾。
声明默认：
`true`（注释，实际运行默认以源码/安装包为准）枚举：
false/true$router.options.sensitive:boolean | undefined— 依赖声明使正则表达式区分大小写。
声明默认：
`false`（注释，实际运行默认以源码/安装包为准）枚举：
false/true$router.options.strict:boolean | undefined— 依赖声明是否禁止路径末尾的斜杠。
声明默认：
`false`（注释，实际运行默认以源码/安装包为准）枚举：
false/true
$router.addRoute:(NonNullable<AsamProgressExpose["$router"]>)["addRoute"]— 依赖声明向已有路由添加子路由，或向路由器添加新的 RouteRecordRaw 路由记录。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.removeRoute:(NonNullable<AsamProgressExpose["$router"]>)["removeRoute"]— 依赖声明按名称移除已有路由。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["removeRoute"]>, (...args: never[]) => unknown>>[0]): void$router.clearRoutes:() => void— 依赖声明从路由器中删除全部路由。
事件参数：
(): void$router.currentRoute:ShallowRef<AsamProgressExpose["$route"]>— 依赖声明当前 RouteLocationNormalized。
嵌套展开边界：框架 / 平台类型；完整类型见公开类型视图。
$router.listening:boolean— 依赖声明允许关闭历史事件监听，这是用于微前端的底层 API。
枚举：
false/true$router.hasRoute:(NonNullable<AsamProgressExpose["$router"]>)["hasRoute"]— 依赖声明检查指定名称的路由是否存在。
事件参数：
(name: Parameters<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["hasRoute"]>, (...args: never[]) => unknown>>[0]): boolean$router.getRoutes:(NonNullable<AsamProgressExpose["$router"]>)["getRoutes"]— 依赖声明获取全部 RouteRecord 路由记录的完整列表。
事件参数：
(): ReturnType<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["getRoutes"]>, (...args: never[]) => unknown>>$router.resolve:(NonNullable<AsamProgressExpose["$router"]>)["resolve"]— 依赖声明返回 RouteLocationRaw 的规范化位置，包含带基础路径的 href；默认使用 router.currentRoute 作为 currentLocation，仅在高级场景中覆盖。
事件参数完整签名见公开类型视图。
事件参数完整签名见公开类型视图。
$router.push:(NonNullable<AsamProgressExpose["$router"]>)["push"]— 依赖声明通过向历史栈添加记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["push"]>, (...args: never[]) => unknown>>$router.replace:(NonNullable<AsamProgressExpose["$router"]>)["replace"]— 依赖声明通过替换历史栈中的当前记录，以编程方式导航到新 URL。
事件参数：
(to: Parameters<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>[0]): ReturnType<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["replace"]>, (...args: never[]) => unknown>>$router.back:() => void— 依赖声明通过 history.back() 在可用时后退，等价于 router.go(-1)。
事件参数：
(): void$router.forward:() => void— 依赖声明通过 history.forward() 在可用时前进，等价于 router.go(1)。
事件参数：
(): void$router.go:(delta: number) => void— 依赖声明通过调用 history.go() 在历史记录中前进或后退。
事件参数：
(delta: number): void$router.beforeEach:(NonNullable<AsamProgressExpose["$router"]>)["beforeEach"]— 依赖声明添加每次导航之前执行的守卫，并返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["beforeEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.beforeResolve:(NonNullable<AsamProgressExpose["$router"]>)["beforeResolve"]— 依赖声明添加导航确认之前执行的守卫，此时组件已获取且其他导航守卫已通过；返回移除此守卫的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["beforeResolve"]>, (...args: never[]) => unknown>>[0]): () => void$router.afterEach:(NonNullable<AsamProgressExpose["$router"]>)["afterEach"]— 依赖声明添加每次导航结束后执行的钩子，并返回移除此钩子的函数。
事件参数：
(guard: Parameters<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["afterEach"]>, (...args: never[]) => unknown>>[0]): () => void$router.onError:(NonNullable<AsamProgressExpose["$router"]>)["onError"]— 依赖声明添加导航期间未捕获错误的处理函数，涵盖同步和异步异常、守卫返回或传给 next 的错误，以及路由异步组件解析错误。
事件参数：
(handler: Parameters<Extract<NonNullable<(NonNullable<AsamProgressExpose["$router"]>)["onError"]>, (...args: never[]) => unknown>>[0]): () => void$router.isReady:() => Promise<void>— 依赖声明返回在初次导航完成后兑现的 Promise，此时关联的异步进入钩子与异步组件均已解析；导航已完成时立即兑现。可用于保持服务端与客户端渲染一致；服务端需手动推入初始位置，客户端从 URL 自动读取。
事件参数：
(): Promise<void>$router.install:(app: App) => void— 依赖声明由 app.use(router) 自动调用，用户不应手动调用；客户端调用时会触发初次导航。
事件参数：
(app: App<any>): void
AsamProgressInstance 公开类型视图
import type { ComponentPublicInstance, ComponentOptionsBase, ComponentProvideOptions, ComponentOptionsMixin, GlobalComponents, GlobalDirectives, WatchOptions, WatchStopHandle, ShallowRef, App } from 'vue';
import type { AsamProgressInstance, AsamProgressExpose, AsamTableColumnExpose, AsamProgressProps, AsamProgressSlots, AsamProgressColor, AsamProgressFn } from '@asam-ui/ui';
type PublicMember<T, K extends PropertyKey> = T extends unknown ? K extends keyof T ? T[K] : never : never;
// AsamProgressInstance
type PublicContract = {
"$": AsamProgressExpose["$"];
"$data": AsamTableColumnExpose;
"$props": AsamProgressProps;
"$attrs": AsamProgressExpose["$attrs"];
"$refs": AsamProgressExpose["$refs"];
"$slots": AsamProgressSlots;
"$root": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$parent": ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions>, {}, {}, "", {}, any> | null;
"$host": Element | null;
"$emit": (event: string, ...args: any[]) => void;
"$el": any;
"$options": (AsamProgressInstance)["$options"];
"$forceUpdate": () => void;
"$nextTick": (AsamProgressInstance)["$nextTick"];
"$watch": (AsamProgressInstance)["$watch"];
readonly "type": "circle" | "line" | "dashboard";
readonly "format": AsamProgressFn;
readonly "width": number;
readonly "color": string | AsamProgressColor[] | AsamProgressFn;
readonly "strokeLinecap": NonNullable<"inherit" | "square" | "butt" | "round" | undefined>;
readonly "strokeWidth": number;
readonly "percentage": number;
readonly "status": "" | "success" | "warning" | "exception";
readonly "duration": number;
readonly "showText": boolean;
readonly "indeterminate"?: boolean | undefined;
readonly "textInside"?: boolean | undefined;
readonly "striped"?: boolean | undefined;
readonly "stripedFlow"?: boolean | undefined;
"$route": AsamProgressExpose["$route"];
"$router": AsamProgressExpose["$router"];
};作用域插槽保留上游实例契约。
参数与事件说明
default
必填：否；声明来源：上游声明。
default 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(props: { percentage: number; }): any
AsamProgressSlots 公开类型视图
import type { AsamProgressSlots } from '@asam-ui/ui';
// AsamProgressSlots
type PublicContract = {
"default"?: (AsamProgressSlots)["default"];
readonly [key: string]: import("vue").Slot<any> | undefined;
};参数与事件说明
color
必填：是；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
percentage
必填：是；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
AsamProgressColor 公开类型视图
import type { AsamProgressColor, AsamProgressExpose } from '@asam-ui/ui';
// AsamProgressColor
type PublicContract = {
"color": string;
"percentage": number;
};AsamProgressFn 公开类型视图
import type { AsamProgressFn, AsamProgressExpose } from '@asam-ui/ui';
// AsamProgressFn
type PublicContract = {
(percentage: number): string;
};参数与事件说明
width
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：126（2.14.7；源码事实，未作为 ASAM 运行实测）
type
必填：否；声明来源：上游声明。
type 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："circle" / "line" / "dashboard"
默认值与来源
未知 / 未声明固定上游源码默认表达式：'line'（2.14.7；源码事实，未作为 ASAM 运行实测）
duration
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：3（2.14.7；源码事实，未作为 ASAM 运行实测）
color
必填：否；声明来源：上游声明。
color 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(percentage: number): string
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
format
必填：否；声明来源：上游声明。
format 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
事件参数：(percentage: number): string
默认值与来源
未知 / 未声明固定上游源码函数默认值（作为值，不执行）：(percentage: number): string => `${percentage}%`（2.14.7；源码事实，未作为 ASAM 运行实测）
percentage
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：0（2.14.7；源码事实，未作为 ASAM 运行实测）
status
必填：否；声明来源：上游声明。
status 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："" / "success" / "warning" / "exception"
默认值与来源
未知 / 未声明固定上游源码默认表达式：''（2.14.7；源码事实，未作为 ASAM 运行实测）
indeterminate
必填：否；声明来源：上游声明。
indeterminate 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
strokeWidth
必填：否；声明来源：上游声明。
默认值与来源
未知 / 未声明固定上游源码默认表达式：6（2.14.7；源码事实，未作为 ASAM 运行实测）
strokeLinecap
必填：否；声明来源：上游声明。
strokeLinecap 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举："inherit" / "square" / "butt" / "round"
默认值与来源
未知 / 未声明固定上游源码默认表达式：'round'（2.14.7；源码事实，未作为 ASAM 运行实测）
textInside
必填：否；声明来源：上游声明。
textInside 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
showText
必填：否；声明来源：上游声明。
showText 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
默认值与来源
未知 / 未声明固定上游源码默认表达式：true（2.14.7；源码事实，未作为 ASAM 运行实测）
striped
必填：否；声明来源：上游声明。
striped 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
stripedFlow
必填：否；声明来源：上游声明。
stripedFlow 参数与事件数据
下列为声明可读视图；可导入类型以公开类型视图为准。分支条件与父属性一致。
枚举：false / true
AsamProgressPropsPublic 公开类型视图
import type { AsamProgressPropsPublic, AsamProgressProps, AsamProgressExpose, AsamProgressFn } from '@asam-ui/ui';
// AsamProgressPropsPublic
type PublicContract = {
readonly "width"?: number | undefined;
readonly "type"?: (AsamProgressPropsPublic)["type"];
readonly "duration"?: number | undefined;
readonly "color"?: (AsamProgressPropsPublic)["color"];
readonly "format"?: AsamProgressFn | undefined;
readonly "percentage"?: number | undefined;
readonly "status"?: (AsamProgressPropsPublic)["status"];
readonly "indeterminate"?: boolean | undefined;
readonly "strokeWidth"?: number | undefined;
readonly "strokeLinecap"?: (AsamProgressPropsPublic)["strokeLinecap"];
readonly "textInside"?: boolean | undefined;
readonly "showText"?: (AsamProgressPropsPublic)["showText"];
readonly "striped"?: boolean | undefined;
readonly "stripedFlow"?: boolean | undefined;
};