使用Vue+elementUI制作倒计时关闭提示框

使用Vue+elementUI制作倒计时关闭提示框

话说在前，因工作需求要做一个带倒计时关闭的提示框，百度了一些都没有完整的特别合适的demo，于是自己写了一个，望大神们指点。

弹出框

其实从业务角度来讲仿佛使用MessageBox更合适，但是我们要在弹出框中加入逻辑，于是我在这里选择了el-dialog，以下为代码：

    <el-dialog
      title="提示"
      :visible.sync="Successdialog" 
      :show-close= false //不要小叉叉关闭
      :close-on-click-modal= true //不要点击遮罩层关闭
      :close-on-press-escape= false //不要esc关闭
      width="30%" //宽度
      center>
      <span style="font-size:18px;">他不喜欢我女装制作！{{Sencond}}秒后关闭页面。</span> //这里是弹出框正文的内容，{{Sencond}}就是我们的倒计时data拉
      <span slot="footer" class="dialog-footer"> //footer这里我只保留了一个按键，大家自由发挥
        <el-button @click="sendMsg" type="primary" :disabled="isDisabled">立即关闭</el-button>
      </span>
    </el-dialog>

 data () {
    return {
      Successdialog: false,//控制弹出
      Sencond: 5,//设置初始倒计时
      isDisabled: false
      }
  }

倒计时逻辑

getSencond () {
   const that = this
   const interval = window.setInterval(function () {
     --that.Sencond
     if (that.Sencond === 0) {
       that.isDisabled = false
       window.clearInterval(interval)
       that.sendMsg()//倒计时结束时运行的业务逻辑，这里的是关闭当前页面
     }
   }, 1000)
 }

关闭当前页面

 sendMsg () {
   window.close()
 }

总结

ok啦，这就是一个倒计时关闭页面提示框的整体的逻辑，第一次写博客不太会表述原理，代码现成的拿去用就好，欢迎大家批评指正