elementUi中steps步骤条的使用

elementUi中steps步骤条的使用

使用

<template>
  <div class="contentBox">
    <div>
      <div class="stepContent">
        <div class="stepBgBox">
          <div class="stepBox">
            <el-steps
              :active="stepIndex - 1"
              finish-status="success"
              align-center
              style="width:100%;"
            >
              <el-step
                v-for="item in stepData"
                :key="item.title"
                :title="item.title"
              ></el-step>
            </el-steps>
          </div>
        </div>
      </div>
      <div>
        <el-button @click="skipTo('pre')" v-if="stepIndex > 1"
          >上一步</el-button
        >
        <el-button @click="skipTo('next')" v-if="stepIndex < 6"
          >下一步</el-button
        >
        <el-button v-if="stepIndex > 5">完成</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      stepData: [
        { title: "步骤一" },
        { title: "步骤二" },
        { title: "步骤三" },
        { title: "步骤四" },
        { title: "步骤五" },
      ],
      stepIndex: 1,
    };
  },
  methods: {
    skipTo(type) {
      if (type == "pre") {
        if (this.stepIndex == 1) return;
        this.stepIndex--;
      } else if (type == "next") {
        this.stepIndex++;
      }
    },
  },
  mounted() {
    this.test();
    var a = [
      { id: "1", item: "苹果" },
      { id: "1", item: "苹果" },
      { id: "1", item: "果" },
      { id: "1", item: "1" },
    ];
    if (!this.isSomeEqual(a, "item")) {
      console.log("重复");
    }
  },
};
</script>

修改样式

<style scoped>
.contentBox {
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
  background: rgb(249, 246, 244);
}
.stepContent {
  width: 100%;
  height: 180px;
  padding: 20px;
  text-align: center;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #f0ebe7;
}
.stepBgBox {
  background: linear-gradient(
    90deg,
    rgba(255, 159, 0, 0.16),
    rgba(255, 102, 0, 0.16)
  );
  width: 100%;
  height: 100%;
  border-radius: 8px;
}
.stepBox {
  width: 100%;
  height: 100%;
  display: flex;
  /* justify-content: center;
  text-align: center; */
  align-items: center;
  border-radius: 8px;
}
.stepContent >>> .el-step__head.is-finish {
  color: #fff;
  border-color: #ff6600;
}
.stepContent >>> .el-step__head.is-success {
  color: #fff;
  border-color: #ff6600;
}
.stepContent >>> .el-step__title.is-success {
  font-size: 14px;
  font-family: PingFangSC, PingFangSC-Semibold;
  font-weight: 600;
  color: #261c15;
}
.stepContent >>> .el-step__head.is-process {
  color: #fff;
  border: 0;
  border-color: none;
}
.stepContent >>> .el-step__title.is-process {
  font-size: 14px;
}

.stepContent >>> .el-step__title {
  font-size: 14px;
}
.stepContent >>> .el-step__head.is-text {
  border: 0;
  border-color: none;
}
.stepContent >>> .el-step__icon.is-text {
  border: 0;
  border-color: none;
}
.stepContent >>> .el-step__icon {
  width: 54px;
  height: 54px;
  font-size: 20px;
  background: linear-gradient(270deg, #ff6600, #ffa000);
}
.stepContent >>> .el-step.is-horizontal .el-step__line {
  height: 1px;
  top: 50%;
}
.stepContent >>> .el-step__head.is-wait {
  font-size: 26px;
  font-family: PingFangSC, PingFangSC-Semibold;
  font-weight: 600;
  color: #98867a;
}
.stepContent >>> .el-step__head.is-wait .el-step__icon {
  background: #fff;
}
.stepContent >>> .el-step__title.is-wait {
  color: #98867a;
}
</style>