vue怎么实现弹窗关闭后刷新效果

本篇内容主要讲解“vue怎么实现弹窗关闭后刷新效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue怎么实现弹窗关闭后刷新效果”吧!

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;}};}

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

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

。 

到此，相信大家对“vue怎么实现弹窗关闭后刷新效果”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！