vue - Vant库 - popup弹出框实现两秒后自动关闭

2021-06-29
vue - Vant库 - popup弹出框实现两秒后自动关闭

<van-button plain color="#4b8ffb" @click="toCancel">取消预约</van-button>

<van-popup v-model="show">
     <div class="myAppointment-content-popup">
        //  弹出框内容根据自己需要填写
         <van-icon name="warning-o" color="#ee0a24" size="0.5rem" />
         已超过取消预约时间，无法取消喽~
     </div>
 </van-popup>

data(){
   return{
        show: false,
    }
},

methods:{
	toCancel(){
        this.show = true
        if(this.show){
            console.log(this.show)
            setTimeout(()=>{
                this.show = false
            },2000)
        }
    },
}

先让弹出框出现，之后根据判断如果弹出框是出现的，即this.show = true，利用setTimeout让它实现两秒后自动消失；
setTimeout() 设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行指定的代码。