?文章來源地址http://www.zghlxwxcb.cn/news/detail-626051.html

<template>
  <div>
    <!--1.設(shè)置 simple 可應(yīng)用簡潔風(fēng)格，該條件下 align-center / description / direction / space 都將失效。-->
    <!--    <el-steps :active="currentStep" simple>-->
    <!--      <el-step-->
    <!--          v-for="(item, index) in stepsArr"-->
    <!--          :key="index"-->
    <!--          :title="item.title"-->
    <!--          :description="item.description"-->
    <!--          :icon="item.icon"-->
    <!--      />-->
    <!--    </el-steps>-->

    <!-- 2.當(dāng)前使用的是假數(shù)據(jù),正式組件封裝可以采用Props傳值的方式 -->
    <el-steps :active="values" align-center process-status="process" finish-status="success">
      <el-step
          v-for="(item, index) in stepsData"
          :key="index"
          :title="item.title"
          :description="item.date"
      />
    </el-steps>


    <!--3.采用Props傳值的方式-->
    <!--    <el-steps :active="currentStep" align-center process-status="process" finish-status="success">-->
    <!--      <el-step-->
    <!--          v-for="(item, index) in stepsArr"-->
    <!--          :key="index"-->
    <!--          :title="item.title"-->
    <!--          :description="item.description"-->
    <!--      />-->
    <!--    </el-steps>-->


  </div>
</template>

<script>
export default {
  name: 'StepsComponent',
  props: {
    currentStep: {
      type: Number,
      default: 0
    },
    stepsArr: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      stepsData: [
        {
          title: '第1步',
          date: '完成時間：xxxx-xx-xx xx:xx:xx'
        },
        {
          title: '第2步',
          date: '完成時間：xxxx-xx-xx xx:xx:xx'
        },
        {
          title: '第3步',
          date: '完成時間：xxxx-xx-xx xx:xx:xx'
        },
        {
          title: '第4步',
          date: '完成時間：xxxx-xx-xx xx:xx:xx'
        },
        {
          title: '第5步',
          date: '完成時間：xxxx-xx-xx xx:xx:xx'
        },
        {
          title: '第6步',
          date: '完成時間：xxxx-xx-xx xx:xx:xx'
        },
      ],
      values: 3,
    };
  }
};
</script>


<style lang="scss" scoped>

// finish 圖標(biāo)
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__head.is-finish .el-step__icon {
  z-index: 1;
  color: darkgray;
  border-color: darkgray;
}

//finish title 顏色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__title.is-finish {
  color: darkgray;
  font-weight: 700;
}

//finish description 顏色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__description.is-finish {
  color: darkgray;
  font-weight: 700;
  white-space: nowrap;
}

// finish 連線  
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__head.is-finish .el-step__line {
  position: absolute;
  border-color: darkgray;
  background-color: darkgray;
}



// process 圖標(biāo)
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__head.is-process .el-step__icon {
  z-index: 1;
  color: #1ed2c3;
  border-color: #1ed2c3;
}

//process 文字顏色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__title.is-process {
  font-weight: 700;
  color: #1ed2c3;
}

//process description 顏色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__description.is-process {
  color: #1ed2c3;
  font-weight: 700;
  white-space: nowrap;
}

//process  連線 
/deep/ .el-steps.el-steps--horizontal.el-step.is-horizontal.is-center.el-step__head.is-process.el-step__line {
  border-color: #1ed2c3;
  background-color: #1ed2c3;
}


// wait 圖標(biāo)
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__head.is-wait .el-step__icon {
  z-index: 1;
  color: #f6ce06;
  border-color: #f6ce06;
}

// wait文字顏色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__title.is-wait {
  font-weight: 700;
  color: #f6ce06;
}

//wait description 顏色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__description.is-wait {
  color: #f6ce06;
  font-weight: 700;
  white-space: nowrap;
}

//wait   連線 
/deep/ .el-steps.el-steps--horizontal.el-step.is-horizontal.is-center.el-step__head.is-wait.el-step__line {
  border-color: #f6ce06;
  background-color: #f6ce06;
}




// error 圖標(biāo)
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__head.is-error .el-step__icon {
  z-index: 1;
  color: #ff0000;
  border-color: #ff0000;
}

// error文字顏色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__title.is-error {
  font-weight: 700;
  color: #ff0000;
}

//error description 顏色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__description.is-error {
  color: #ff0000;
  font-weight: 700;
  white-space: nowrap;
}

//error   連線  
/deep/ .el-steps.el-steps--horizontal.el-step.is-horizontal.is-center.el-step__head.is-error.el-step__line {
  border-color: #ff0000;
  background-color: #ff0000;
}


//success 圖標(biāo)
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__head.is-success .el-step__icon {
  z-index: 1;
  color: #5eff00;
  border-color: #5eff00;
}

// success文字顏色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__title.is-success {
  font-weight: 700;
  color: #5eff00;
}

//success description 顏色
/deep/ .el-steps.el-steps--horizontal .el-step.is-horizontal.is-center .el-step__description.is-success {
  color: #5eff00;
  font-weight: 700;
  white-space: nowrap;
}

//success   連線  
/deep/ .el-steps.el-steps--horizontal.el-step.is-horizontal.is-center.el-step__head.is-success.el-step__line {
  border-color: #5eff00;
  background-color: #5eff00;
}



</style>

到了這里，關(guān)于Vue2+Element-UI的el-steps封裝與修改樣式的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！