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 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
vue单元格多列合并的实现
Nov 26 Vue.js
vue element实现表格合并行数据
Nov 30 Vue.js
vue3.0实现插件封装
Dec 14 Vue.js
Vue实现省市区三级联动
Dec 27 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
Vite和Vue CLI的优劣
Jan 30 Vue.js
开发一个封装iframe的vue组件
Mar 29 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 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防注
2007/01/15 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
php从数据库读取数据,并以json格式返回数据的方法
2018/08/21 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
两个JavaScript jsFiddle JSBin在线调试器
2010/03/14 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
2016/10/13 Javascript
通过扫描二维码打开app的实现代码
2016/11/10 Javascript
Bootstrap modal使用及点击外部不消失的解决方法
2016/12/13 Javascript
基于js文件加载优化(详解)
2018/01/03 Javascript
vue-lazyload图片延迟加载插件的实例讲解
2018/02/09 Javascript
springboot+vue实现文件上传下载
2020/11/17 Vue.js
Django中实现点击图片链接强制直接下载的方法
2015/05/14 Python
Python实现把数字转换成中文
2015/06/29 Python
python实现发送邮件及附件功能
2021/03/02 Python
详解Python中字符串前“b”,“r”,“u”,“f”的作用
2019/12/18 Python
python多维数组分位数的求取方式
2020/03/03 Python
Python Django2 model 查询介绍(条件、范围、模糊查询)
2020/03/16 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
pycharm配置QtDesigner的超详细方法
2021/01/25 Python
HTML5 Canvas 破碎重组的视频特效的示例代码
2019/09/24 HTML / CSS
领导调研接待方案
2014/02/27 职场文书
安全生产管理责任书
2014/04/16 职场文书
给市场的环保建议书
2014/05/14 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
护理见习报告范文
2014/11/03 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
博士生专家推荐信
2015/03/25 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python