在 Vue 2 的 Element UI 和 Vue 3 的 Element Plus 中,Progress 进度条组件在功能和用法上有很多相似之处,但也有一些细微的差别。下面我将分别介绍这两个版本中的 Progress 组件的属性、事件和方法,并给出使用示例。
Vue 2 + Element UI Progress
属性 (Attributes)
percentage
: 百分比(必填),范围 0-100。type
: 进度条类型,可选值为line
(线形)和circle
(圆形)。status
: 进度条状态,可选值为success
、exception
和warning
,分别表示成功、异常和警告。stroke-width
: 进度条的线宽,单位 px。color
: 进度条的颜色。show-text
: 是否显示进度条文本内容。text-inside
: 进度条文本是否内置到进度条内(仅在type="circle"
时有效)。width
: 进度条宽度(仅在type="line"
时有效),单位可以是px
或%
。
事件 (Events)
Element UI 的 Progress 组件没有暴露特定的事件。但你可以使用原生的 DOM 事件(如 click
、<