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

1、倒计时 

<div class="timers" style="text-align:center;font-size:18px;font-weight:bold;">
   <p v-if="sendAuthCode" class="c-right" @click="getCode" >关闭</p>
   <p v-if="!sendAuthCode" class="c-right"> 距离券源收集结束还有<span class="auth_text_blue" style="color:red;font-weight:bold;">{{timer}} </span> 秒</p>
</div>

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、遮罩层

<div class="father" v-cloak>
    <div class="mask" v-show="maskShow"></div>
    <div class="child" id="child" v-show="maskShow">
      <vue-scrollbar ref="Scrollbar">
        <a-card :bordered="false">
          <div class="userManual">
              <img v-for="item in files" :src="item" style="width:100%" alt="">
              <a-button type="primary" v-show="maskShow" @click="setMaskShow" style="margin-top:50px;">阅读完成</a-button>
            </div>
        </a-card>
      </vue-scrollbar>
    </div>
</div>

<style>
[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;
}
</style>

 

data(){
    return{
      maskShow: true,
      routername:'',
    }
}


setMaskShow(){
    if(res.success){
        this.maskShow = false
        this.$router.push({
            name: 'dashboard'
          })
    }
}

 

来源：CSDN

作者：年轻即出发

链接：https://blog.csdn.net/weixin_42246997/article/details/103736039