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

html

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

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

js

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

也可以用 setInterval()与setTimeout()计时器;

例如：setInterval()

// 检测当前登录账号 密码未修改时间            
getSencond(){                
    let _this = this;                
    this.Successdialog = true;                
    this.Sencond = 5;                               
    _this.timer = setInterval(function(){//定时器开始                   
        _this.Sencond--;                   
        if(_this.Sencond === 0){                        
            clearInterval(_this.timer);// 满足条件时 停止计时                        
            // _this.sendMsg();                        
            _this.Successdialog = false;                        
            _this.getEnterpriseInfo();                   
        }               
    },1000)            
},            
sendMsg(){                
    clearInterval(this.timer);// 停止计时                
    this.Successdialog = false;                
    // 去登陆                
    this.getEnterpriseInfo();            
},

END

===