Progress 进度条

展示操作进度。

基础使用

type 可以设置为 line 线性，或者 circle 环形。

控制台

value: 80%

查看代码

<template>
	<demo-container>
		<gov-input-number
			v-model="value"
			:step="10"
			:min="0"
			:max="100"
			suffix="%"
			controls
		/>
		<hr />
		<gov-progress v-model="value" />
		<hr />
		<gov-progress v-model="value" type="circle" />
		<template #console>value: {{ value }}%</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref(80);
</script>

自定义颜色

可以设置 color, backgroundColor, completeColor 来控制控件的主色、背景色、完成等颜色。

控制台

value: 80%

查看代码

<template>
	<demo-container>
		<gov-input-number
			v-model="value"
			:step="10"
			:min="0"
			:max="100"
			suffix="%"
			controls
		/>
		<hr />
		<gov-progress v-model="value" color="#999" completeColor="#666" />
		<hr />
		<gov-progress
			v-model="value"
			type="circle"
			color="#999"
			completeColor="#666"
		/>
		<template #console>value: {{ value }}%</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref(80);
</script>

自定义展示

可以根据 slot 来自定义内容，提供一个 value 参数作为进度数值。

控制台

value: 80%

查看代码

<template>
	<demo-container>
		<gov-input-number
			v-model="value"
			:step="10"
			:min="0"
			:max="100"
			suffix="%"
			controls
		/>
		<hr />
		<gov-progress v-model="value">
			<template #default="{ value }">
				{{ value === 100 ? "已完成" : "剩余" + (100 - value) + "%" }}
			</template>
		</gov-progress>
		<hr />
		<gov-progress v-model="value" type="circle">
			<template #default="{ value }">
				<div>
					<i style="font-size: 20px">{{
						value == 100 ? "✓" : value + "%"
					}}</i>
					<div>整体进度</div>
				</div>
			</template>
		</gov-progress>
		<template #console>value: {{ value }}%</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref(80);
</script>

定义线条宽度

可以自定义线条的宽度，范围 2px - 50px。

控制台

 value: 80%
 strokeWidth: 15px 

查看代码

<template>
	<demo-container>
		<gov-input-number
			v-model="value"
			:step="10"
			:min="0"
			:max="100"
			suffix="%"
			controls
		/>
		<hr />
		<gov-progress v-model="value" :strokeWidth="15" />
		<hr />
		<gov-progress v-model="value" type="circle" :strokeWidth="15" />
		<template #console>
			value: {{ value }}%<br />
			strokeWidth: 15px
		</template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const value = ref(80);
</script>

Attributes

属性	类型	默认值	描述
modelValue	Number	0	绑定的0-100之间的数值，表示进度。
strokeWidth	Number	6	环形或线形进度条的宽度。
type	String	"line"	进度条的类型，可以是"line"（线形）或"circle"（圆形）。
backgroundColor	String	"#e6e8eb"	进度条背景色。
color	String	"#e74c3c"	进度条的主色。
completeColor	String	"#27ae60"	进度条达到100%（完成后）的色彩。

Slots

Slot Name	Scope	描述
default	value	默认插槽，用于自定义文字内容，如百分比或完成图标。插槽提供了一个属性，即当前的进度值（modelValue）。