vue项目微信回退按钮处理

最新推荐文章于 2020-07-17 20:21:30 发布

weixin_33881140

最新推荐文章于 2020-07-17 20:21:30 发布

阅读量1k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/rachelch/p/10476543.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name='viewport' content='width=device-width, initial-scale=1.0, user-scalable=no'/>
        <meta name="MobileOptimized" content="360"/>
        <style>
            html{font-size: calc(100vw / 3.75)}
            body,html{
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }
            body{
                font-size: 14px;
                background: rgba(251,251,253,1);
                color: #000;
                font-family:"PingFang SC","microsoft yahei";
            }
            .flex{display:flex;display:-webkit-flex;}
            .jc-center{justify-content:center;-webkit-justify-content:center;}
            .ai-center{align-items:center;-webkit-align-items:center;}
            .fd-column{flex-direction:column;-webkit-flex-direction:column;}
            .noActivity{
                height: 100%;
                text-align: center;
            }
            .noAcitivityMain{
                height: 90%;
                color: #4D5061;
            }
            .noAcitivityMain img{
                width: 1.8rem;
                max-width: 249px;
                max-height: 249px;
            }
            .noAcitivityMain .notice{
                margin-top: 3vh;
                color: rgba(51,53,65,0.5);
            }
        </style>
    </head>
    <body>
        <div class="noActivity relative" id="succOrder">
            <div class="noAcitivityMain flex ai-center jc-center fd-column">
                <img src="img/succOrder.png" alt="" />
                <div class="bold succorder">预约成功！</div>
                <div>您已成功预约，</div>
                <div>稍后我们会推送给您预约成功的消息</div>
            </div>
        </div>
        <script src="js/vue.min.js"></script>
        <script>
            vm = new Vue({
                  el: '#succOrder',
                  data:{
                  },
                  mounted(){
                      //监测回退
                      history.pushState(null, null, document.URL)
                    window.addEventListener('popstate', this.forbidback);
                  },
                  beforeDestroy(){
                      //销毁
                      window.removeEventListener('popstate',this.forbidback);
                  },
                  methods: {
                      forbidback(){
                          //回退按钮点击处理
                          alert('kkkk');
                      }
                  }
            })
        </script>
    </body>
</html>

转载于:https://www.cnblogs.com/rachelch/p/10476543.html

weixin_33881140

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue项目微信回退按钮处理

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name='viewport' content='width=device-wid...
复制链接

扫一扫