Progress 进度条

进度条组件，用于展示操作的当前进度。

代码演示

基础用法

通过v-model表示进度条的当前进度，text属性控制进度条中间文字内容。

<hd-progress v-model="current" :text="`${current}%`"></hd-progress>

const current = ref<number>(10)

宽度控制

通过strokeWidth属性来控制进度条宽度，默认24rpx。

<hd-progress v-model="current" strokeWidth="15px"></hd-progress>

const current = ref<number>(10)

颜色定制

通过color属性控制进度条颜色，默认#1C64FD，通过layerColor属性控制进度条轨道颜色，默认#EBEEF5。

<hd-progress v-model="current" color="#1C64FD" layerColor="#EBEEF5"></hd-progress>

const current = ref<number>(10)

是否置灰

通过inactive属性来控制进度条是否处于禁用状态，默认false。

<hd-progress v-model="current" :inactive="true"></hd-progress>

const current = ref<number>(10)

是否展示进度文字

通过showText属性来控制是否展示进度文字，默认true。

<hd-progress v-model="current" :showText="false"></hd-progress>

const current = ref<number>(10)

Props

Name	Description	Type	Required	Default
inactive	是否置灰	Boolean	false	false
value	进度百分比，推荐使用v-model方式	Number	false	0
showText	是否显示进度文字	Boolean	false	true
text	进度条文字	String	false	-
textColor	进度文字颜色	String	false	#FFFFFF
color	进度条颜色	String	false	#1C64FD
layerColor	进度条底色	String	false	#EBEEF5
strokeWidth	进度条粗细，默认单位为px	Number	false	24