乘风原创程序

  • vue?实现弹窗关闭后刷新效果
  • 2022/4/8 12:13:06
  • vue弹窗关闭后刷新效果

    问题

    列表点击进入详情时弹窗内容重新赋值,但是修改后未点击保存再打开同一个弹窗,数据是关闭前的样子。

    解决

    在双击时间里定义一个时间戳,每次点击传过去的值,在弹窗watch里接收时间戳再赋值。关闭页面清空对象。

    列表页:

    this.timestamp=new date().gettime();

    弹窗详情页:

    props: {timestamp:number}
    watch: {
    ? ?timestamp:{
    ? ? ?//深度监控的数据获取
    ? }
    }

    关闭或刷新vue文件弹出提示框

    在vue文件中加入如下代码:

    我将如下代码加入到了app.vue中

    beforerouteleave(to, from, next) {
    const answer = window.confirm(“当前页面数据未保存,确定要离开?”);
    if (answer) {
    next();
    } else {
    next(false);
    }
    },
    mounted() {
    var _this=this;
    window.onbeforeunload = function(e) {
    if (_this.$route.fullpath == ‘/index/uploadimages') {
    e = e || window.event;
    // 兼容ie8和firefox 4之前的版本
    if (e) {
    e.returnvalue = “关闭提示”;
    }
    // chrome, safari, firefox 4+, opera 12+ , ie 9+
    return “关闭提示”;
    } else {
    window.onbeforeunload = null;
    }
    };
    }

    编译运行,在浏览器刷新/关闭,弹出以下提示框

    在这里插入图片描述

    在这里插入图片描述

    注意:上面的方法生效的前题是,打开该网页后,需要鼠标点击一下网页,让网页获取焦点,然后再关闭或刷新! 若打开后不点击页面直接关闭或刷新不会触发该方法。

    以上为个人经验,希望能给大家一个参考,也希望大家多多支持本教程网。