变更element步骤条样式添加①②③.....

原本样式:

变更后样式:

页面代码:

<el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
        <el-step>
          <template #icon>
            <span class="font">①</span>
          </template>
          <template #title>
            <span>
              主要信息 (
              <b class="bred">必填</b>)
            </span>
          </template>
        </el-step>
        <el-step>
          <template #icon>
            <span class="font">②</span>
          </template>
          <template #title>
            <span>
              次要信息(
              <b class="bblue">非必填</b>)
            </span>
          </template>
        </el-step>
        <el-step>
          <template #icon>
            <span class="font">③</span>
          </template>
          <template #title>
            <span>
              哈哈信息(
              <b class="bblue">非必填</b>)
            </span>
          </template>
        </el-step>
      </el-steps>
 <div v-show="active===0">主要信息</div> 
 <div v-show="active===1">次要信息</div> 
 <div v-show="active===2">哈哈信息</div> 
<el-button type="primary" @click="next">下一步</el-button>

定义变量:

data() {
    return {
      active: 0,
    }
}

定义方法:(我这个只能走两步,想走多步自己按需设置)

 next() {
      console.log(this.active);
      if (this.active++ >= 2) {
        this.active = 2;
      }
    },

css代码:

.font {
  font-size: 15px;
}