vue 实现弹窗关闭后刷新效果
更新时间：2022年04月08日 09:46:04 作者：大可大可抖
这篇文章主要介绍了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组件暴露和.js文件暴露接口操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
element表单el-form的label自适应宽度的实现
本文主要介绍了element表单el-form的label自适应宽度的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要为大家介绍了Vue3中toRef和toRefs函数的使用方法，文中通过示例为大家进行了详细的讲解，感兴趣的小伙伴可以跟随小编一起学习一下2022-07-07
这篇文章主要介绍了详解在vue-cli项目下简单使用mockjs模拟数据，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-10-10
vite2打包的时候vendor-xxx.js文件过大的解决方法
vite2是一个非常好用的工具，只是随着代码的增多，打包的时候 vendor-xxxxxx.js 文件也越来越大，本文主要介绍了vite2打包的时候vendor-xxx.js文件过大的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家详细介绍了Vuex实现记事本功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
这篇文章主要介绍了vue-router的导航守卫使用讲解,vue-router提供了许多编程式导航的API，其中最常见的导航API有很多种，本文给大家详细讲解，需要的朋友可以参考下2022-12-12
本文主要介绍了vite的搭建与使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-06-06
Vue中的配置项Props能让组件接收外部传递过来的数据,本文给大家介绍了Vue props实现父组件给子组件传递数据的几种方式,文中有详细的实现方式,具有一定的参考价值,需要的朋友可以参考下2023-10-10
这篇文章主要给大家介绍了关于vue3中getCurrentInstance的相关资料,文中还介绍了Vue3中关于getCurrentInstance的大坑,需要的朋友可以参考下2023-03-03
最新评论