html 倒计时遮罩,Vue小记(2)---倒计时/遮罩层

1、倒计时

关闭

距离券源收集结束还有{{timer}} 秒

data:{

return{

sendAuthCode: true,

timer: 0,

}

}

methods:{

getCode() {

this.sendAuthCode = false;

this.timer = 300;

var auth_timetimer = setInterval(() => {

this.timer--;

if (this.timer <= 0) {

this.sendAuthCode = true;

clearInterval(auth_timetimer);

window.location.reload();

// window.opener=null;

// window.open('',self);

// window.close();

}

}, 1000);

},

}

2、遮罩层

阅读完成

[v-cloak]{

display: none

}

.mask{

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

z-index: 999;

background: #000;

opacity: 0.3;

}

.userManual{

position: relative;

z-index:9999;

left: 50%;

top: 50%;

transform: translate(-50%,0%);//实现居中对齐

width:82%;

}

button{

width: 100px;

height: 40px;

line-height: 40px;

text-align: center;

}

.child{

width: 100%;

height: 100%;

border: 1px solid #ccc;

text-align: center;

background: rgba(255, 253, 253,0);

}

.my-scrollbar{

width: 100%;

min-width: 300px;

max-height: 750px;

}

.scroll-me{

min-width: 750px;

}

data(){

return{

maskShow: true,

routername:'',

}

}

setMaskShow(){

if(res.success){

this.maskShow = false

this.$router.push({

name: 'dashboard'

})

}

}