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使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
vue $router和$route的区别详解
Dec 02 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
vue的hash值原理也是table切换实例代码
Dec 14 Vue.js
Vue-router中hash模式与history模式的区别详解
Dec 15 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
vue图片裁剪插件vue-cropper使用方法详解
Dec 16 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
Vue h函数的使用详解
Feb 18 Vue.js
vue route新窗口跳转页面并且携带与接收参数
Apr 10 Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 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
简单实用的.net DataTable导出Execl
2013/10/28 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
WordPress中使主题支持小工具以及添加插件启用函数
2015/12/22 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
在修改准备发的批量美化select+可修改select时,在非IE下发现了几个问题
2007/01/09 Javascript
innertext , insertadjacentelement , insertadjacenthtml , insertadjacenttext 等区别
2007/06/29 Javascript
比较简单实用的使用正则三种版本的js去空格处理方法
2007/11/18 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
JavaScript学习笔记记录我的旅程
2012/05/23 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
bootstrap导航、选项卡实现代码
2016/12/28 Javascript
巧用canvas
2017/01/21 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
vue.js 实现点击展开收起动画效果
2018/07/07 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
vue移动端写的拖拽功能示例代码
2020/09/09 Javascript
[04:44]显微镜下的DOTA2第二期——你所没有注意到的细节
2014/06/20 DOTA
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
Python中用Spark模块的使用教程
2015/04/13 Python
python基于socket实现网络广播的方法
2015/04/29 Python
使用Numpy读取CSV文件,并进行行列删除的操作方法
2018/07/04 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
Python内建序列通用操作6种实现方法
2020/03/26 Python
Python 保存加载mat格式文件的示例代码
2020/08/04 Python
Python-split()函数实例用法讲解
2020/12/18 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
日本小田急百货官网:Odakyu
2018/07/19 全球购物
好习惯伴我成长演讲稿
2014/05/21 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
学生穿着不得体检讨书
2014/10/12 职场文书
摘录式读书笔记
2015/07/01 职场文书