vue?實(shí)現(xiàn)彈窗關(guān)閉后刷新效果
vue彈窗關(guān)閉后刷新效果
問(wèn)題
列表點(diǎn)擊進(jìn)入詳情時(shí)彈窗內(nèi)容重新賦值，但是修改后未點(diǎn)擊保存再打開(kāi)同一個(gè)彈窗，數(shù)據(jù)是關(guān)閉前的樣子。
解決
在雙擊時(shí)間里定義一個(gè)時(shí)間戳，每次點(diǎn)擊傳過(guò)去的值，在彈窗watch里接收時(shí)間戳再賦值。關(guān)閉頁(yè)面清空對(duì)象。
列表頁(yè)：
this.timestamp=new Date().getTime();
彈窗詳情頁(yè)：
props: {timestamp:Number}
watch: {
? ?timestamp:{
? ? ?//深度監(jiān)控的數(shù)據(jù)獲取
? }
}關(guān)閉或刷新vue文件彈出提示框
在vue文件中加入如下代碼：
我將如下代碼加入到了app.vue中
beforeRouteLeave(to, from, next) {
const answer = window.confirm(“當(dāng)前頁(yè)面數(shù)據(jù)未保存，確定要離開(kāi)？”);
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 = “關(guān)閉提示”;
}
// Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
return “關(guān)閉提示”;
} else {
window.onbeforeunload = null;
}
};
}編譯運(yùn)行，在瀏覽器刷新/關(guān)閉，彈出以下提示框
注意：上面的方法生效的前題是，打開(kāi)該網(wǎng)頁(yè)后，需要鼠標(biāo)點(diǎn)擊一下網(wǎng)頁(yè)，讓網(wǎng)頁(yè)獲取焦點(diǎn)，然后再關(guān)閉或刷新! 若打開(kāi)后不點(diǎn)擊頁(yè)面直接關(guān)閉或刷新不會(huì)觸發(fā)該方法。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue組件暴露和.js文件暴露接口操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
element表單el-form的label自適應(yīng)寬度的實(shí)現(xiàn)
本文主要介紹了element表單el-form的label自適應(yīng)寬度的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
一文搞懂Vue3中toRef和toRefs函數(shù)的使用
這篇文章主要為大家介紹了Vue3中toRef和toRefs函數(shù)的使用方法，文中通過(guò)示例為大家進(jìn)行了詳細(xì)的講解，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-07-07
詳解在vue-cli項(xiàng)目下簡(jiǎn)單使用mockjs模擬數(shù)據(jù)
這篇文章主要介紹了詳解在vue-cli項(xiàng)目下簡(jiǎn)單使用mockjs模擬數(shù)據(jù)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
vite2打包的時(shí)候vendor-xxx.js文件過(guò)大的解決方法
vite2是一個(gè)非常好用的工具，只是隨著代碼的增多，打包的時(shí)候?vendor-xxxxxx.js?文件也越來(lái)越大，本文主要介紹了vite2打包的時(shí)候vendor-xxx.js文件過(guò)大的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要為大家詳細(xì)介紹了Vuex實(shí)現(xiàn)記事本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
vue-router的導(dǎo)航守衛(wèi)使用最新講解
這篇文章主要介紹了vue-router的導(dǎo)航守衛(wèi)使用講解,vue-router提供了許多編程式導(dǎo)航的API，其中最常見(jiàn)的導(dǎo)航API有很多種，本文給大家詳細(xì)講解，需要的朋友可以參考下2022-12-12
本文主要介紹了vite的搭建與使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
Vue props實(shí)現(xiàn)父組件給子組件傳遞數(shù)據(jù)的方式
Vue中的配置項(xiàng)Props能讓組件接收外部傳遞過(guò)來(lái)的數(shù)據(jù),本文給大家介紹了Vue props實(shí)現(xiàn)父組件給子組件傳遞數(shù)據(jù)的幾種方式,文中有詳細(xì)的實(shí)現(xiàn)方式,具有一定的參考價(jià)值,需要的朋友可以參考下2023-10-10
vue3中g(shù)etCurrentInstance示例講解
這篇文章主要給大家介紹了關(guān)于vue3中g(shù)etCurrentInstance的相關(guān)資料,文中還介紹了Vue3中關(guān)于getCurrentInstance的大坑,需要的朋友可以參考下2023-03-03