写一个二次确认的提示窗口

需求：在路由跳转之前写一个提示窗口，对操作者进行二次提示。在任务未发布时点击下一环节，出现还未发布任务弹窗，选择是否跳转。点击下一环节时检测学生提交人数，如果全部提交就直接跳转，否则跳出弹窗，选择是否跳转。当从练习模块跳转到另一个模块时检测学生提交人数，如果全部提交就直接跳转，否则跳出弹窗，选择是否跳转。

思路：

首先要知道这个提示窗口在哪里出现，先观察是全局的还是局部的，如果只有一个组件需要用到提示窗口那么这个窗口就是局部的，如果有多个组件需要用到这个窗口那么这个窗口就可以写到全局组件里。

其次要理清楚逻辑关系，要确认这个窗口什么时候，在什么样的条件下出现，此处我们的条件是在老师点击下一环节时出现二次确认窗口，提示老师还有同学未完成任务，是否跳转？如果老师点击确认那么就跳转，如果老师点击取消，那么该弹窗消失。所以弹窗出现的时间时老师点击下一环节，弹窗消失的时间是老师点击取消或者确定，跳转的时间是老师点击完确定以后。

实现步骤：

弹窗出现：利用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;},

写一个二次确认的提示窗口相关推荐

PHP+PHPQRcode写一个二维码接口api
首先推荐一下phpqrcode这个插件,对于php开发要使用到二维码功能非常实用 PHPqrcode 下载链接放在这了前端index.php 调用api的方式:域名/index.php?text=内 ...
PHP面试题:写一个二维数组排序算法函数，能够具有通用性，可以调用php内置函数(array_multisort())
//二维数组排序, $arr是数据,$keys是排序的健值,$order是排序规则,1是升序,0是降序 function array_sort($arr, $keys, $order=0) {if ( ...
快速封装一个二维码在线生成接口
方法一:利用接口,生成二维码这种方法生成的二维码最简单,你只需要调用别人提供的二维码生成接口,同时传递相应的参数即可. <?php /*** @author DengPeng <3@de ...
封装一个全局使用的二次确认弹窗
背景: 如图所示,在项目中进行删除.取消.停用等等操作的时候,出于考虑误操作等,我们通常会需要用户进行二次确认,然后再进行操作.对于这种使用比较多的公共功能,我们如何才能保持一致并且简单的使用呢?出于 ...
ACMNO.24 C语言-转置矩阵写一个函数，使给定的一个二维数组（３×３）转置，即行列互换。输入一个3x3的矩阵输出转置后的矩阵样例
题目描述写一个函数,使给定的一个二维数组(3×3)转置,即行列互换. 输入一个3x3的矩阵输出转置后的矩阵样例输入 1 2 3 4 5 6 7 8 9 样例输出 1 4 7 2 5 8 3 ...
已知一棵二叉树的中序序列和后序序列，写一个建立该二叉树的二叉链表存储结构的算法...
已知一棵二叉树的中序序列和后序序列,写一个建立该二叉树的二叉链表存储结构的算法 #define N 10 //二叉树节点的个数 char postorderstr[]={};//后序序列 char i ...
《美团点评》编程题---有一个二维数组(n*n),写程序实现从右上角到左下角沿主对角线方向打印
题目:有一个二维数组(n*n),写程序实现从右上角到左下角沿主对角线方向打印. 给定一个二位数组arr及题目中的参数n,请返回结果数组. 测试样例: [[1,2,3,4],[5,6,7,8],[9,1 ...
写一个函数，使给定的一个二维数组（３×３）转置，即行列互换
写一个函数,使给定的一个二维数组(3×3)转置,即行列互换 Time Limit: 1 Sec Memory Limit: 128 MB Submit: 163 Solved: 120 [Subm ...
写一个函数，使给定的一个二维数组（３×３）转置，即行列互换。
题目描述写一个函数,使给定的一个二维数组(3×3)转置,即行列互换. 输入一个3x3的矩阵输出无样例输入 1 2 3 4 5 6 7 8 9 样例输出 1 4 7 2 5 8 3 6 9 # ...

写一个二次确认的提示窗口

写一个二次确认的提示窗口相关推荐

最新文章

热门文章