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仿百度搜索功能
Dec 28 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
vue-cli 3如何使用vue-bootstrap-datetimepicker日期插件
Feb 20 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
vue中div禁止点击事件的实现
Apr 02 Vue.js
Vue.Draggable实现交换位置
Apr 07 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
Apr 08 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
多数据表共用一个页的新闻发布
2006/10/09 PHP
理解PHP中的Session及对Session有效期的控制
2016/01/08 PHP
PHP模板引擎Smarty自定义变量调解器用法
2016/04/11 PHP
php实现微信模板消息推送
2018/03/30 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
Laravel框架实现利用监听器进行sql语句记录功能
2018/06/06 PHP
复选框全选与全不选操作实现思路
2013/08/18 Javascript
js控制不同的时间段显示不同的css样式的实例代码
2013/11/04 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
vue.js+boostrap项目实践(案例详解)
2016/09/21 Javascript
Angular表单验证实例详解
2016/10/20 Javascript
AngularJS中如何使用echart插件示例详解
2016/10/26 Javascript
详解jQuery中的事件
2016/12/14 Javascript
通过一次报错详细谈谈Point事件
2018/05/17 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
利用jqgrid实现上移下移单元格功能
2018/11/07 Javascript
layui radio单选限制下一个radio单选的实例
2019/09/03 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
简单介绍Python中的JSON模块
2015/04/08 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
Python 中的 global 标识对变量作用域的影响
2019/08/12 Python
python GUI库图形界面开发之PyQt5输入对话框QInputDialog详细使用方法与实例
2020/02/27 Python
opencv中图像叠加/图像融合/按位操作的实现
2020/04/01 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
python 通过pip freeze、dowload打离线包及自动安装的过程详解(适用于保密的离线环境
2020/12/14 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
Zooplus罗马尼亚:宠物食品和配件
2019/11/02 全球购物
const和static readonly区别
2013/05/20 面试题
出售房屋协议书范本
2014/10/06 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python