Vue的step步骤条的使用

效果如下:

代码：

1、父组件

<template>
  <el-container class="container">
    <el-steps :active="active" finish-status="success" simple style="margin-top: 20px;background-color: white;height: 30px;width: 34%">
      <el-step title="步骤 1" ></el-step>
      <el-step title="步骤 2" ></el-step>
      <el-step title="步骤 3" ></el-step>
    </el-steps>
    <el-card style="margin-top: 20px;width: 50%;">
      <hello-world1 v-if="active==0" @clickPrev="prev()" @clickNext="next()"></hello-world1>
      <hello-world2 v-if="active==1" @clickPrev="prev()" @clickNext="next()"></hello-world2>
      <hello-world3 v-if="active==2" @clickPrev="prev()" @clickNext="next()"></hello-world3>
    </el-card>
  </el-container>
</template>

<script>
import HelloWorld1 from "@/components/HelloWorld1.vue";
import HelloWorld2 from "@/components/HelloWorld2.vue";
import HelloWorld3 from "@/components/HelloWorld3.vue";
export default {
  name: 'HomeView',
  components: {
    HelloWorld3,
    HelloWorld2,
    HelloWorld1
  },
  data() {
    return {
      active: 0
    }
  },
  created() {
  },
  methods:{
    next() {
      console.log(this.active)
      this.active = this.active + 1
    },
    prev() {
      --this.active
    },

  }
}
</script>
<style scoped>
.container{
  width: 100%;
  height: 800px;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
  align-items: center;
  background-color: #CAE1FF;
}
</style>

子组件HelloWorld1

<template>
  <div class="hello">
    <div style="color: blue">这是子组件HelloWorld1</div>
    <div style="position: absolute;bottom: 90px;right: 400px;">
      <el-button plain @click="clickNext()">下一步<i class="el-icon-arrow-right el-icon--right" /></el-button>
    </div>
  </div>
</template>

<script>
let that
export default {
  name: 'HelloWorld1',
  methods:{
    clickNext(){
      this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '保存',
        cancelButtonText: '取消'
      }).then(() => {
        this.$message({
          type: 'info',
          message: '保存成功'
        })
        this.$emit('clickNext')
      }).catch(action => {
        if(action === 'cancel'){
          this.$emit('clickNext')
        }
      })
    }

  }
}
</script>

<style scoped lang="less">
.hello{
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;

}
</style>

 

子组件HelloWorld2

<template>
  <div class="hello">
    <div style="color: red">这是子组件HelloWorld2</div>
    <div style="position: absolute;bottom: 90px;right: 400px;">
      <el-button icon="el-icon-arrow-left" plain @click="prev()">上一步</el-button>
      <el-button plain @click="clickNext()">下一步<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </div>
  </div>
</template>

<script>
let that
export default {
  name: 'HelloWorld2',
  methods:{
    prev() {
      this.$emit('clickPrev')
    },
    clickNext() {
      this.$confirm('检测到未保存的内容，是否在离开页面前保存修改？', '确认信息', {
        distinguishCancelAndClose: true,
        confirmButtonText: '保存',
        cancelButtonText: '取消'
      }).then(() => {
        this.$message({
          type: 'info',
          message: '保存成功'
        })
        this.$emit('clickNext')
      }).catch(action => {
        if(action === 'cancel'){
          this.$emit('clickNext')
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.hello{
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

 

子组件HelloWorld3

<template>
  <div class="hello">
    <div style="color: green">这是子组件HelloWorld3</div>
    <div style="position: absolute;bottom: 90px;right: 400px;">
      <el-button icon="el-icon-arrow-left" plain @click="prev()">上一步</el-button>
    </div>
  </div>
</template>

<script>
let that
export default {
  name: 'HelloWorld3',
  methods:{
    prev() {
      this.$emit('clickPrev')
    },
  }
}
</script>

<style scoped lang="less">
.hello{
  width: 100%;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>