效果如下:
代码：
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>
标签：Vue,center,步骤,clickNext,step,HelloWorld3,HelloWorld2,HelloWorld1,emit From： https://www.cnblogs.com/zwh0910/p/18183971