vue项目锁定和解锁功能

一、先给所需要锁定的功能里面加上:disabled="isLocked"

二、定义两个按钮

<el-button type="primary" v-if="lock" @click="Unlock">{{status ? '解锁':'锁定'}}</el-button>
<el-button type="primary" v-if="!lock" plain>{{time}}秒后{{status ? '锁定':'解锁'}}</el-button>

三、在data中定义默认值

data(){
    return{
        time:4,
        isLocked: true,
        status:true,
        lock:true,
    }
}

四、最后在method中定义函数

Unlock() {
   this.status = !this.status
   this.lock = false
   let times = setInterval(()=>{
     if(this.time == 0){
        this.isLocked = !this.isLocked
        this.lock = true
        clearInterval(times)
        this.time = 4
      }
    this.time = this.time - 1
  },1000)
},

五、最后的效果