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


Posted in Vue.js onApril 08, 2022

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 实现弹窗关闭后刷新效果

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

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

以上为个人经验,希望能给大家一个参考,也希望大家多多支持三水点靠木。 

Vue.js 相关文章推荐
vue + el-form 实现的多层循环表单验证
Nov 25 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
vue实现表格合并功能
Dec 01 Vue.js
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
详解Vue3.0 + TypeScript + Vite初体验
Feb 22 Vue.js
vue打开新窗口并实现传参的图文实例
Mar 04 Vue.js
vue+django实现下载文件的示例
Mar 24 Vue.js
解读Vue组件注册方式
May 15 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 #Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 #Vue.js
vue实现列表拖拽排序的示例代码
vue实现可以快进后退的跑马灯组件
Apr 08 #Vue.js
Axios代理配置及封装响应拦截处理方式
vue-cil之axios的二次封装与proxy反向代理使用说明
Apr 07 #Vue.js
vue实现拖拽交换位置
Apr 07 #Vue.js
You might like
由php的call_user_func传reference引发的思考
2010/07/23 PHP
PHP中的string类型使用说明
2010/07/27 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
php获取微信openid方法总结
2019/10/10 PHP
srcElement表格样式
2006/09/03 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
jquery select(列表)的操作(取值/赋值)
2009/08/06 Javascript
jquery中ajax调用json数据的使用说明
2011/03/17 Javascript
jQuery调用AJAX时Get和post公用的乱码解决方法实例说明
2013/06/04 Javascript
jquery中页面Ajax方法$.load的功能使用介绍
2014/10/20 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
2015/05/09 Javascript
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
Centos7 中安装 Node.js v4.4.4
2016/11/03 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
nodejs连接mysql数据库简单封装示例-mysql模块
2017/04/10 NodeJs
Easyui ueditor 整合解决不能编辑的问题(推荐)
2017/06/25 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
解决vue cli使用typescript后打包巨慢的问题
2019/09/30 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
使用python实现正则匹配检索远端FTP目录下的文件
2015/03/25 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
pytorch下使用LSTM神经网络写诗实例
2020/01/14 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
韩国知名的家庭购物网站:CJmall
2016/08/01 全球购物
美国求婚钻戒网站:Super Jeweler
2016/08/27 全球购物
求职自荐信的格式
2014/04/07 职场文书
党的群众路线教育实践活动个人对照检查剖析材料
2014/09/23 职场文书
大学生创业事迹材料
2014/12/30 职场文书
2015年“世界无车日”活动方案
2015/05/06 职场文书
就业指导讲座心得体会
2016/01/15 职场文书
详解NumPy中的线性关系与数据修剪压缩
2022/05/25 Python