vuecli3实现全局公用组件，定时下线功能

vuecli3定时下线倒计时五分钟

实现功能：用户登录的时候，根据轮班设置会产生一个用户的轮班结束时间，就是下线时间，到了时间点要弹窗提示用户轮班时间到了，如果不操作倒计时五分钟自动注销，如果点击继续值班，每十分钟再弹窗提醒，这篇记录单页面实现功能 （涉及自定义倒计时、父子组件传值，时间格式转化（hh:mm:ss和国标时间比较））

效果图：

弹窗页面：

子组件页面

<div class="right-admin-container">
    <div class="warn-diolog-title">
    <img class="warn-down" src="../../../../../src/assets/login_images/X.png" @click="conwork"> 
    </div>
    <div class="content-container">
      当前<span style="color:#33BBBB;">轮班</span>时间已到
    </div>
    <!-- <div class="content-container2">
      倒计时 00 : {{ minute }} : {{ second }}
    </div> -->
    <div class="button-container">
      <div class="button-l" @click="logout">注销</div>
      <div class="button-r" @click="conWork">继续值班</div>
    </div>
  </div>

轮班倒计时（五分钟）：

 data() {
    return {
      endTime: '',
      startTime: '',
      minutes: 5,
      seconds: 0,
      time: 0
    }

  computed: {
   second: function () {
   return this.num(this.seconds)
  },
  minute: function () {
    return this.num(this.minutes)
  }
 },
 watch: {
  second: {
    handler(newVal) {
     this.num(newVal)
    }
   },
   minute: {
     handler(newVal) {
      this.num(newVal)
    }
  }
 },
  mounted() {
    this.$nextTick(() => {
       this.timer()
    })
  },

倒计时方法

     倒计时
 num(n) {
  return n < 10 ? '0' + n : '' + n
 },
timer() {
 var _this = this
  this.time = window.setInterval(function () {
    if (_this.seconds === 0 && _this.minutes !== 0) {
        _this.seconds = 59
       _this.minutes -= 1
     } else if (_this.minutes === 0 && _this.seconds === 0) {
       _this.seconds = 0
      window.clearInterval(this.time)
       _this.logout()
    } else {
      _this.seconds -= 1
   }
   }, 1000)
 },

继续值班后获得当前时间的后十分钟时间，传给父组件（这里我把时间化成了HH:mm：ss格式传给父组件）

//继续值班
   conWork() {
   //清空倒计时
     window.clearInterval(this.time)
     this.startTime = new Date()
     var s = this.startTime
     this.startTime = s.getHours() + ':' + s.getMinutes() + ':' + s.getSeconds()
     this.endTime = new Date(new Date().getTime() + 10 * 60 * 1000)
     var e = new Date(this.endTime)
     this.endTime = e.getHours() + ':' + e.getMinutes() + ':' + e.getSeconds()
     this.$emit('close', false, this.endTime)
   }, 
   //退出系统用户注销
   logout() {
    window.clearInterval(this.time)
     userLogout().then(res => {
       if (res.data.code === 600) {
         this.$message({
           message: '注销成功',
           type: 'success'
         })
         this.$router.push('/login')
       } else {
         this.$message({
           message: res.data.errorMessage,
           type: 'error'
         })
       }
     })
     })
   },  
     

父组件：

页面引入

<logOut v-if="logoutDis" @close="sonFlag" />
import LogOut from './components/LogOut'

import LogOut from './components/LogOut'
 components: {
    LogOut
  },

接收子组件传值（包含点完继续值班传回的新的下线时间，弹窗的显隐两个参数）

 sonFlag(val, para) {
      this.logoutDis = val
      if (para != null) {
        this.endTime = para
      }
      console.log('测试测试测试', val, this.endTime)
    },
    ```
   //下线时间和当前时间的比较 相等时弹出下线提示框
    ```javascript
checkSizes() {
 var _this = this
  var e = _this.endTime //这里时间是HH：mm:ss格式
  var a = e.split(':')
  var size = window.setInterval(function () {
   var s = new Date() //国标格式
   if (s.getHours() === parseInt(a[0]) && s.getMinutes() === parseInt(a[1]) && s.getSeconds() === parseInt(a[2])) {
 a[1])
      window.clearInterval(size)
     _this.logoutDisFlag()
     }
   }, 1000)
 },
 //弹窗显示
   logoutDisFlag() {
  this.logoutDis = true
     console.log('fangfafangfa', this.logoutDis)
  },

初始化页面

 created() {
    //用户登录时存入轮班结束时间 初始化取出
    this.endTime = sessionStorage.getItem('logoutTime')
   this.checkSizes()

监听轮班下线时间变化：

 watch: {
    endTime: {
     deep: true,
     handler(newVal) {
      this.endTime = newVal
     this.checkSizes(newVal)
    }
 }
},