vue怎么實現(xiàn)彈窗關閉后刷新效果

本篇內(nèi)容主要講解“vue怎么實現(xiàn)彈窗關閉后刷新效果”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“vue怎么實現(xiàn)彈窗關閉后刷新效果”吧!

vue彈窗關閉后刷新效果

問題

列表點擊進入詳情時彈窗內(nèi)容重新賦值，但是修改后未點擊保存再打開同一個彈窗，數(shù)據(jù)是關閉前的樣子。

解決

在雙擊時間里定義一個時間戳，每次點擊傳過去的值，在彈窗watch里接收時間戳再賦值。關閉頁面清空對象。

列表頁：

this.timestamp=new Date().getTime();

彈窗詳情頁：

props: {timestamp:Number}
watch: {
   timestamp:{
     //深度監(jiān)控的數(shù)據(jù)獲取
  }
}

關閉或刷新vue文件彈出提示框

在vue文件中加入如下代碼：

我將如下代碼加入到了app.vue中

beforeRouteLeave(to, from, next) {
const answer = window.confirm(“當前頁面數(shù)據(jù)未保存，確定要離開？”);
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;
}
};
}

編譯運行，在瀏覽器刷新/關閉，彈出以下提示框

注意：上面的方法生效的前題是，打開該網(wǎng)頁后，需要鼠標點擊一下網(wǎng)頁，讓網(wǎng)頁獲取焦點，然后再關閉或刷新! 若打開后不點擊頁面直接關閉或刷新不會觸發(fā)該方法。

。 

到此，相信大家對“vue怎么實現(xiàn)彈窗關閉后刷新效果”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！