elementplus自定义步骤条圆框内容

Element Plus 是 Vue 3 的 UI 组件库，其中包含了一个名为 Steps（步骤条）的组件，用于显示一系列有序的任务或过程。如果你想在 Element Plus 的 Steps 组件中自定义每个步骤圆框（通常表示完成状态的部分）的内容，你可以这样做：

1. **基本用法**：
首先，在步骤条组件里，每个步骤都是一个 `Step` 组件，它有 `title` 属性来设置标题，你可以通过这个属性定制圆框内的文字内容。

<el-steps :active="activeIndex" class-name="custom-style">
  <el-step title="第一步" :process="10"></el-step>
  <el-step title="第二步" :process="20"></el-step>
  <!-- 更改其他步骤同理 -->
</el-steps>

2. **自定义样式**：
对于圆框内容，虽然官方提供的样式有限，但你可以通过 CSS 自定义 `.custom-style .el-step::before` 或 `.custom-style .el-step.is-active::before` 来覆盖默认的进度指示器。这通常是通过修改伪元素 `::before` 的内联样式，比如宽度、背景颜色等。

.custom-style .el-step::before {
  width: 50px; /* 自定义宽度 */
  background-color: red; /* 自定义颜色 */
}

3. **动态内容**：
如果需要动态内容，可以结合 Vue 的绑定特性，如 `v-bind:title` 或者计算属性，根据数据变化更新步骤内容。

<template>
  <el-step v-for="(item, index) in steps" :key="index" :title="item.content"></el-step>
</template>

<script>
export default {
  data() {
    return {
      steps: [
        { content: '正在处理...' },
        { content: '已完成' },
        // ...
      ]
    };
  }
};
</script>