【区分vue2和vue3下的element UI Tree 树形组件，分别详细介绍属性，事件，方法如何使用，并举例】

在 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> 语法糖