需求:在路由跳转之前写一个提示窗口,对操作者进行二次提示。在任务未发布时点击下一环节,出现还未发布任务弹窗,选择是否跳转。点击下一环节时检测学生提交人数,如果全部提交就直接跳转,否则跳出弹窗,选择是否跳转。当从练习模块跳转到另一个模块时检测学生提交人数,如果全部提交就直接跳转,否则跳出弹窗,选择是否跳转。
思路:
首先要知道这个提示窗口在哪里出现,先观察是全局的还是局部的,如果只有一个组件需要用到提示窗口那么这个窗口就是局部的,如果有多个组件需要用到这个窗口那么这个窗口就可以写到全局组件里。
其次要理清楚逻辑关系,要确认这个窗口什么时候,在什么样的条件下出现,此处我们的条件是在老师点击下一环节时出现二次确认窗口,提示老师还有同学未完成任务,是否跳转?如果老师点击确认那么就跳转,如果老师点击取消,那么该弹窗消失。所以弹窗出现的时间时老师点击下一环节,弹窗消失的时间是老师点击取消或者确定,跳转的时间是老师点击完确定以后。
实现步骤:
弹窗出现:利用v-show和true/false来控制弹窗出现或者消失当v-show为true时弹窗出现,为false时弹窗消失。
具体实现:
下一环节弹窗:在VUEX中设置状态码(是否全部提交),当点击下一环节时会触发点击事件,此时把状态码的值改为true就可以实现弹窗出现,弹窗出现时会有提示语和确认/取消按钮。点击确定就跳向下一个界面,点击取消则不跳转。
发布任务弹窗:在VUEX中设置状态码(是否发布),在老师点击发布任务的确认按钮以后,是否发布状态码的值为真,在跳转到下一个窗口时一定要把状态码的值置为false,即在两个弹窗的确认之按钮点击时,要同时把是否发布状态码的值置为false这样做是为了不应下下一个页面的状态,同时也确保了在本页面内状态码只修改了一次,即在老师发布任务后和跳转之前的这段时间内状态码保持不变。
路由跳转弹窗:具体实现和下一环节弹窗完全一样,就是代码放置的位置不同而已。
//是否完全提交
isSubmit:true,
//判断是否完全提交条件
if(this.$store.state.studentNum === this.submitNumber){
return this.$store.state.isSubmit = true;
}else{
return this.$store.state.isSubmit = false;
}
//跳转条件
if(this.$store.state.isPublish){
if(this.$store.state.isSubmit){
this.$router.push('/lesson/test')
}else{
this.$store.state.index.commonModal3 = true;
this.$store.state.path = '/lesson/test'
}
}else{
this.$store.state.index.commonModal4 = true;
this.$store.state.isPublish = false;
this.$store.state.path = '/lesson/test'
}
//跳转弹窗
<MiniDialog3>
<template slot="body">
<div>
<span class="dialog_text1">还有学生未完成任务,是否确认跳转?<br></span>
</div>
</template>
<template slot="close">
<div class="dialog_text4" @click="closeCommonModal3">取消</div>
</template>
<template slot="confirm">
<div class="dialog_text5" @click="confirmCommonModal3">确定</div>
</template>
</MiniDialog3>
//跳转弹窗
<MiniDialog4>
<template slot="body">
<div>
<span class="dialog_text1">还未发布任务,是否确认跳转?<br></span>
</div>
</template>
<template slot="close">
<div class="dialog_text4" @click="closeCommonModal4">取消</div>
</template>
<template slot="confirm">
<div class="dialog_text5" @click="confirmCommonModal4">确定</div>
</template>
</MiniDialog4>
//弹窗按钮
closeCommonModal4() {
this.$store.state.index.commonModal4 = false;
},
confirmCommonModal4() {
//实现跳转,关闭弹窗
this.$store.state.index.commonModal4 = false;
this.$router.push(this.$store.state.path);
this.$store.state.isPublish = false;
},
closeCommonModal3() {
this.$store.state.index.commonModal3 = false;
this.$store.state.isSubmit = false;
},
confirmCommonModal3() {
//实现跳转,关闭弹窗
this.$store.state.index.commonModal3 = false;
this.$router.push(this.$store.state.path);
this.$store.state.isSubmit = false;
this.$store.state.isPublish = false;
},