vue小记——小组件（1）

代码： 

<template>
  <div>
    <el-steps :active="active" finish-status="success" simple>
      <el-step title="数据导入"
        ><i class="fa fa-cloud-upload fa-icon-custom" slot="icon"></i>
      </el-step>
      <el-step title="选择数据区"
        ><i class="fa fa-mouse-pointer fa-icon-custom" slot="icon"></i
      ></el-step>
      <el-step title="污染分析"
        ><i class="fa fa-cogs fa-icon-custom" slot="icon"></i
      ></el-step>
      <el-step title="结果保存"
        ><i
          class="fa fa-floppy-o fa-icon-custom"
          aria-hidden="true"
          slot="icon"
        ></i
      ></el-step>
      <el-step title="结果查询"
        ><i class="fa fa-folder-open fa-icon-custom" slot="icon"></i
      ></el-step>
    </el-steps>
    
    <el-button :disabled="active==1" style="margin-top: 12px" @click="pre"
      >上一步</el-button
    >
    <el-button :disabled="active==4" style="margin-top: 12px" @click="next"
      >下一步</el-button
    >
    <div v-show="active == 1">
   
    </div>
  </div>
</template>

<script>
export default {
  name: "1",
  data() {
    return {
      //默认第一步
      active: 0,
    };
  },
  methods: {
    // 步骤条下一步的方法
    next() {
      this.active++;
    },
    // 步骤条上一步的方法
    pre() {
       this.active--;
    },
  },

  components: {},
};
</script>

<style land="less">
.el-step.is-simple .el-step__icon-inner.is-status {
  font-size: 17px;
}
.fa-icon-custom {
  font-size: 17px; 
}
.el-step.is-simple .el-step__icon {
  background: 0 0;
  width: 24px;
  height: 24px;
  font-size: 12px;
}
</style>

效果：