前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue+element踩坑记-公共组件里面做一个计时器

vue+element踩坑记-公共组件里面做一个计时器

作者头像
何处锦绣不灰堆
发布2020-05-29 09:38:15
2.1K0
发布2020-05-29 09:38:15
举报
文章被收录于专栏:农历七月廿一农历七月廿一

业务场景

我在做自助机入住的业务的时候,有这样的一个情况,用户在没一个页面都需要自己操作,例如:预定,刷身份证,输入订单号,人脸识别等等操作,每一个页面都需要一定的时间进行操作,但是会有一种情况,刷身份证的时候,我是页面进来的时候就通知安卓调取硬件的信息,进行身份识别,这个时候安卓那边会告诉我有没有读取成功,如果没有我继续发送读取的请求,在机器没有故障的情况下,直到读取成功才停止,但是如果客户今天没有拿身份证呢?他走了,因为是自助机,所以是没有服务员的,那么如果有素质的顾客是会直接点击回到主页就走的,这样不会影响别的客户使用,那么如果他没有点击,那么就会一直请求按照调取硬件识别身份证的操作,这样显然是不行的,所以我需要做的是每一个页面进来的时候就开始计时90秒,如果90秒以内客户还没有操作结束,我就认为他不再操作了,直接返回到主页。今天就简单的记录一下我实现的过程!

首先,由于是每一个页面都会用到这个计时器,所以我直接写到公共的组价里面,然后在每一个页面里面引入,这里直接记录计时器的实现过程,具体怎么引入以后再写。毕竟我还不是很熟写公共组件,就不班门弄斧了,熟悉了会单独更新这方面的知识!

代码实现

代码语言:javascript
复制
<script>
    export default {
        name: "return",
        data(){
        return  {
             //计时 90秒
             seconds_timeout : 90,
             time : '',
           }
        },
      /**
       * @created 页面加载的时候进行页面自减函数的间隔执行操作
       */
      created : function () {
        let that = this;
        that.time = setInterval(that.remain_sec,1000)
      },
      methods:{
        /**
         * @remain_sec 进行秒数自减的操作
         */
          remain_sec(){
              let that = this;
              if(that.seconds_timeout === 0){
                 that.$router.push({path:'/'});
              }else{
                 that.seconds_timeout--;
              }
          },
          back(){
            this.$router.go(-1);//返回上一层
          }
      },
      /**
       * @beforeDestroy  页面销毁前,将Interval清除
       */
      beforeDestroy : function () {
            let that = this;
            clearInterval(that.time);
      }
    }
</script>

PS:这里需要注意的是在页面销毁前一定要将计时器清除,不然这个计时器在整个流程中只会进行一次计时。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-03-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
人脸识别
腾讯云神图·人脸识别(Face Recognition)基于腾讯优图强大的面部分析技术,提供包括人脸检测与分析、比对、搜索、验证、五官定位、活体检测等多种功能,为开发者和企业提供高性能高可用的人脸识别服务。 可应用于在线娱乐、在线身份认证等多种应用场景,充分满足各行业客户的人脸属性识别及用户身份确认等需求。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档