vue如何在用户要关闭当前网页时弹出提示的实现

本文介绍了vue如何在用户要关闭当前网页时弹出提示的实现，分享给大家，具体如下：

效果如下图

正常 js 页面处理方式

window.onbeforeunload = function (e) {
 e = e || window.event;
 // 兼容IE8和Firefox 4之前的版本
 if (e) {
  e.returnValue = '关闭提示';
 }
 // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
 return '关闭提示';
};

vue 中处理方式

let _this = this
  window.onbeforeunload = function (e) {
   if (_this.$route.name == "dyyPerformanceCenterSale") {
    e = e || window.event;
    // 兼容IE8和Firefox 4之前的版本
    if (e) {
     e.returnValue = '关闭提示1111';
    }
    // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
    return '关闭提示222';
   } else {
    window.onbeforeunload = null
   }
  };

针对很多同学说的没有实现 ，我这里在详细描述一下 方法写在 mounted里面 ，然后 记得把route name替换成自己当前页面的

到此这篇关于vue如何在用户要关闭当前网页时弹出提示的实现的文章就介绍到这了,更多相关vue关闭当前网页时弹出提示内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解用vue编写弹出框组件

    前言 最近研究了用vue编写弹出框的组件,发现其实这里面的门道还是有很多的.这篇文完全是用来记录总结下最近的学习成果,同时也希望能够帮得上正在学习纠结的你~ps:本文假设你已经了解vue2.0相关框架,因此适合有一定vue2.0基础的同学阅读. 设计组件的思考 其实单纯的编写一个弹出框组件并不难,写一个模板,然后用v-if或者v-show指令还控制组件的出现与消失.真正困扰我的是,这个组件的调用方式,这个问题纠结了我好久. 调研了下资料,有些人建议,直接把组件标签插进模板中,然后通过直接控制组件

  • vue弹出框组件封装实例代码

    新学vue,参考别人封装弹出层组件.好用! 1.你需要先建一个弹出框的模板: //首先创建一个mack.vue <template> <div class="mack" v-if="isShow"> <div class="mackWeb" :style="text.mackStyle"> <div class="title font_b" v-if="t

  • 在vue中实现点击选择框阻止弹出层消失的方法

    在vue项目中,选择性别是用的一个弹出层, <div class="sex" v-show="showed" transition='fade' @click="unshow"> <ul @click.stop="stophidden"> <li class="choice">选择</li> <li> <label>男</labe

  • Vue组件化开发之通用型弹出框的实现

    本文主要分享关于组件化开发的理解,让刚入门的小伙伴少走一些弯路,提高开发效率,作者本人也是新手,如有不当之处,请大佬指出,感谢. 相信很多刚入门的小伙伴,经常会写很多重复的代码,而这些代码一般情况下也都是大同小异,在这种情况下,如何让开发和学习变得更加高效,组件化的思想就显得尤为重要.这里通过设计一个简单的弹出框,给小伙伴们分享组件化的应用. 组件&组件化 组件化是对某些可以进行复用的功能进行封装的标准化工作.组件一般会内含自身的内部UI元素.样式和JS逻辑代码,它可以很方便的在应用的任何地方进

  • 使用vue实现各类弹出框组件

    简单介绍一下vue中常用dialog组件的封装: 实现动态传入内容,实现取消,确认等回调函数. 首先写一个基本的弹窗样式,如上图所示. 在需要用到弹窗的地方中引入组件: import dialogBar from './dialog.vue' components:{ 'dialog-bar': dialogBar, }, <dialog-bar></dialog-bar> 点击一个按钮显示弹窗,并保证关闭弹窗后再次点击依旧显示 在弹窗组件中定义一个value值:v-model=&

  • vue多种弹框的弹出形式的示例代码

    vue多种弹框的弹出形式的示例代码

    1.父组件引入子组件,子组件的加载问题 products.vue引入dlAddProd弹框(dlAddProd.vue),由于<div v-show="visible">,所以在products页面加载时,dlAddProd会被加载.但是el-dialog中的body部分不会被加载(不管有没有加v-if指令):dlAddProd弹框中又引入了dlBlankAdd弹框和dlEditProd弹框,但此时只有dlBlankAdd会被加载,dlEditProd不会被加载(<d

  • Vue.js弹出模态框组件开发的示例代码

    Vue.js弹出模态框组件开发的示例代码

    前言 在开发项目的过程中,经常会需要开发一些弹出框效果,但原生的alert和confirm往往都无法满足项目的要求.这次在开发基于Vue.js的读书WebApp的时候总共有两处需要进行提示的地方,因为一开始就没有引入其他的组件库,现在只好自己写一个模态框组件了.目前只是一个仅满足当前项目需求的初始版本,因为这个项目比较简单,也就没有保留很多的扩展功能.这个组件还是有很多扩展空间的,可以增加更多的自定义内容和样式.这里只介绍如何去开发一个模态框组件,有需要进行更多扩展的,可以根据自己的需求自行开发

  • vue组件实现弹出框点击显示隐藏效果

    本文实例为大家分享了vue实现弹出框点击显示隐藏的具体代码,供大家参考,具体内容如下 效果如下图 由于我的更改密码弹出框是一个组件引用的,所以在一开始是隐藏的,这就需要在当前的页面上对弹出框组件设置v-show,但是在弹出框显示出来的时候,操作执行完后当前页面的更改按钮已经被弹出框覆盖了.所以只能在弹出页面点击取消实现关闭隐藏弹出框.这样就需要写两个点击事件,但是两个点击事件就会有冲突,需要点击两下才能使弹出框显示和隐藏.然后我就用的以下方法,希望可以帮到大家!!! 代码如下 1.在当前页面中(

  • vue如何在用户要关闭当前网页时弹出提示的实现

    本文介绍了vue如何在用户要关闭当前网页时弹出提示的实现,分享给大家,具体如下: 效果如下图 正常 js 页面处理方式 window.onbeforeunload = function (e) { e = e || window.event; // 兼容IE8和Firefox 4之前的版本 if (e) { e.returnValue = '关闭提示'; } // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+ return '关闭提示'; }; vu

  • js退弹 IE关闭时弹出广告代码,可以防止屏蔽

    在网上寻觅了很久JS退弹代码,也没有找出让人非常满意的代码.于是今天把收集的退弹代码做了一下整理,精简出一个非常短小精悍而强力的JS退弹代码,能够突破现在绝大多数浏览器的限制,包括SP2.IE6.IE7.遨游.MYIE等等. 现提供给有这方面需求的用户: 完整版24小时只弹一次的代码 复制代码 代码如下: function Get(){ var Then = new Date() Then.setTime(Then.getTime() + 24*60*60*1000) //这里是24小时,如果想

  • JS实现关闭当前页而不弹出提示框的方法

    本文实例讲述了JS实现关闭当前页而不弹出提示框的方法.分享给大家供大家参考,具体如下: 关闭当前页面,并且打开新页面(不提示) function closeWinAndOpen(url) { var sWinName = "LR"+parseInt(Math.random() * 100000000);//利用随机数处理WinName window.open(url,sWinName, 'toolbar=no,location=no,directories=no,status=yes,

  • 如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗？”

    如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗？”

    一.避免弹出提示框 在网上搜了很多,答案大都是设置window.onbeforeunload=null ,但是试用之后无效. 这个问题放了两天之后返回来再次想,终于找到了答案,在此和大家分享一下: 解除jquery离开页面弹出提(1) 先解除绑定在设置弹出内容为null. 复制代码 代码如下: $(function(){   $(window).unbind('beforeunload');   window.onbeforeunload = null;   }) 二.其他相关[摘要] (1)w

  • vue移动端时弹出侧边抽屉菜单效果

    vue移动端时弹出侧边抽屉菜单效果

    效果图: aside.vue: <template> <div class="aside"> <div style=" height: 60px; background-color: #2e6baa; line-height: 60px; display: flex; align-items: center; justify-content: center; " > <img src="https://lj-com

  • 用javascript关闭本窗口不弹出询问框的方法

    大家都知道window.close()是用来关闭窗口的,而且ie和firefox都是支持的. 为了实现用户对浏览器的绝对控制,ie中用close关闭非open打开的窗口时回弹出一个对话框询问用户,怎么去掉这个框呢,请看下面的代码. function winClose(){ window.top.opener = null; window.close(); } 在window.close之前加上window.top.opener = null就可以了. 有人说firefox不支持close,其实这

  • 基于jQuery的网页右下角弹出广告(IE7,firefox)

    演示代码: 测试 .divCss{ bottom:0; display:block; height:25px; overflow:hidden; padding:0; position:fixed; right:20px; } .contentCss{ background:#666; height:200px; width:200px; } .contentCssHeight{ } .titleCss{ width:200px; height:25px; line-height:25px; t

  • javaScript 关闭浏览器 (不弹出提示框)

    复制代码 代码如下: <script language="javaScript"> function closeWindow() { window.opener = null; window.open(' ', '_self', ' '); window.close(); } </script> <input type='button' value='关闭窗口' onClick="closeWindow()"> 或 复制代码 代码

  • 网页右下角弹出窗体实现代码

    复制代码 代码如下: <!--开始--> <style type="text/css"> #msg_win{position:absolute;right:0px;display:none;overflow:hidden;z-index:99;border:1px solid #c00;background:#F9EFFC;width:210px;font-size:12px;margin:0px;} #msg_win .icos{position:absolu

  • 打开新窗口关闭当前页面不弹出关闭提示js代码

    复制代码 代码如下: <script type="text/javascript"> function closeIt() { window.opener = ''; window.open('http://www.baidu.com'); window.open('', '_self'); window.close(); } self.setInterval("newTime()", 1000) var t = 4; function newTime(

随机推荐