Vue2+Element-UI的el-steps封装与修改样式-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue2+Element-UI的el-steps封装与修改样式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

el-steps,Vue,Element UI,vue.js,前端,javascript

文章来源地址https://www.toymoban.com/news/detail-626051.html

<template>
  <div>
    <!--1.设置 simple 可应用简洁风格，该条件下 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.当前使用的是假数据,正式组件封装可以采用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 图标
/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 图标
/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 图标
/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 图标
/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 图标
/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>

到了这里，关于Vue2+Element-UI的el-steps封装与修改样式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！