element 中el-steps设置指定情况进度条及文字颜色为红色

在Element UI中，可以通过active-color属性来设置进度条的颜色，同时可以通过description属性来自定义步骤条中的文字描述。如果你想要在特定的情况下将进度条及其文字颜色设置为红色，你可以使用Vue的绑定功能来动态改变这些属性。

以下是一个简单的例子，展示了如何在特定的情况下设置进度条及其文字颜色为红色：

<template>
  <el-steps :active="activeStep" finish-status="error">
    <el-step
      v-for="item in steps"
      :key="item.title"
      :title="item.title"
      :description="item.description"
    ></el-step>
  </el-steps>
</template>
 
<script>
export default {
  data() {
    return {
      activeStep: 2, // 假设当前激活的步骤是第三步
      steps: [
        { title: '步骤 1', description: '描述 1' },
        { title: '步骤 2', description: '描述 2' },
        { title: '步骤 3', description: '描述 3' },
        { title: '步骤 4', description: '描述 4' }
      ]
    };
  }
};
</script>
 
<style>
/* 通过类选择器来指定特定情况下的样式 */
.el-step__title.is-error {
  color: red; /* 设置文字颜色为红色 */
}
.el-step__description.is-error {
  color: red; /* 设置描述文字颜色为红色 */
}
.el-steps--simple .el-step__icon.is-error {
  border-color: red; /* 设置图标边框颜色为红色 */
}
.el-steps--simple .el-step__icon.is-error .el-step__line {
  background-color: red; /* 设置进度条颜色为红色 */
}
</style>

在上面的代码中，我们设置了active-step为2，这意味着第三个步骤是当前激活的。Element UI的el-steps组件会自动将finish-status设置为当前激活步骤的状态，默认为success。我们通过为el-step添加一个自定义的类（例如is-error），然后在样式中定义这个类对应的颜色，从而实现在特定情况下将进度条及其文字颜色设置为红色的需求。