进度条

进度条组件。

基础使用

通过 percent 属性设置进度条的进度。

<template>
	<pure-progress percent="50"></pure-progress>
</template>

自定义大小

通过 size 属性自定义进度条的粗细。

<template>
	<pure-progress
		percent="50"
		size="2px"
	></pure-progress>
</template>

自定义颜色

通过 color 属性自定义进度条的颜色。

<template>
	<pure-progress
		percent="50"
		color="#9900ff"
	></pure-progress>
</template>

主题

通过 theme 属性设置进度条的主题。

<template>
	<pure-progress
		percent="50"
		theme="primary"
	></pure-progress>
	<pure-progress
		percent="50"
		theme="success"
	></pure-progress>
	<pure-progress
		percent="50"
		theme="warning"
	></pure-progress>
	<pure-progress
		percent="50"
		theme="danger"
	></pure-progress>
	<pure-progress
		percent="50"
		theme="info"
	></pure-progress>
</template>

进度文字

通过 pivotText 属性设置进度条的进度文字。

<template>
	<pure-progress
		percent="50"
		pivot-text="自定义文字"
	></pure-progress>
</template>

属性

名称	类型	默认值	说明
percent	[Number, String]	0	进度值
size	String	8px	粗细
theme	String	primary	主题
color	String	#409eff	进度条颜色
trackColor	String	--pure-background-deep	轨道颜色
pivotText	String	百分比	进度文字内容
pivotColor	String	同进度条颜色	进度文字内容背景
textColor	String	#ffffff	进度文字颜色
showPivot	Boolean	true	是否显示进度文字
radius	String	100px	圆角大小

插槽

名称	参数	说明
#default		默认，进度文字内容

样式变量

名称	说明
--pure-progress-size	粗细
--pure-progress-track-color	轨道颜色
--pure-progress-border-radius	圆角大小
--pure-progress-color	进度条颜色
--pure-progress-pivot-width	进度内容宽度
--pure-progress-pivot-height	进度内容高度
--pure-progress-pivot-background	进度内容背景
--pure-progress-pivot-border-radius	进度内容圆角大小
--pure-progress-pivot-font-size	进度内容字体大小
--pure-progress-text-color	进度内容文字颜色
--pure-progress-pivot-padding	进度内容内边距
--pure-progress-pivot-white-space	进度内容文字换行