在 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
、mouseover
等)。
方法 (Methods)
Progress 组件没有直接提供方法。
示例
<template>
<el-progress
:percentage="50"
type="circle"
:color="'#409EFF'"
:status="'success'"
:text-inside="true"
></el-progress>
<el-progress
:percentage="80"
type="line"
:stroke-width="20"
:show-text="false"
></el-progress>
</template>
<script>
export default {
data() {
return {
// 这里没有特定的进度条相关数据,因为直接在模板中设置了
};
}
};
</script>
Vue 3 + Element Plus Progress
属性 (Attributes)
percentage
: 百分比(必填),范围 0-100。type
: 进度条类型,可选值为line
(线形)和circle
(圆形)。status
: 进度条状态,可选值为success
、exception
和warning
。stroke-width
: 进度条的线宽,单位 px。color
: 进度条的颜色,可以使用对象来自定义多色进度条。show-text
: 是否显示进度条文本内容。text-inside
: 进度条文本是否内置到进度条内(仅在type="circle"
时有效)。gap-degree
: 圆形进度条缺口的角度,仅在type="circle"
时有效。gap-position
: 圆形进度条缺口的位置,仅在type="circle"
时有效,可选值为top
、bottom
、left
、right
。width
: 进度条宽度(仅在type="line"
时有效),单位可以是px
或%
。
事件 (Events)
与 Element UI 类似,Element Plus 的 Progress 组件也没有暴露特定的事件。
方法 (Methods)
Progress 组件没有直接提供方法。
示例
<template>
<el-progress
:percentage="50"
type="circle"
:color="'#409EFF'"
:status="'success'"
:text-inside="true"
:gap-degree="75"
:gap-position="'top'"
></el-progress>
<el-progress
:percentage="80"
type="line"
:stroke-width="20"
:width="200"
:show-text="false"
></el-progress>
</template>
<script setup>
// 在这个版本的 Vue 中,使用 `<script setup>` 语法糖,因此没有显式的 data、methods 等
</script>
差异
- Element Plus 在 Progress 组件中增加了
gap-degree
和gap-position
属性,用于圆形进度条的缺口设置。 - Element Plus 的
color
属性支持使用对象来自定义多色进度条,这在 Element UI 中是不可用的。 - Vue 3 的
<script setup>
语法糖