ElementUi 防止message连续弹出提示 影响用户体验

在很多应用场景下我们需要提示用户怎么去正确操作
message也是ElementUi的一个很实用的提示手法
但有时一个东西不能点 你会给他弹一个message 但用户要是连着一直点这个地方
就会出现一个问题

就是会连着弹提示框 看着非常不雅观
其实在message中有一个属性duration 可以控制提示的时间
那么首先我们在vue data中定义一个响应式变量
Boolean类型

 data() {
        return {  
            AntiShake: true  //限制不能重复弹出提示
        }
 }

然后我们在执行提示的地方这样写

//判断this.AntiShake为假  则继续执行  如果为假  说明上一次的提示还没有接受  到这就不执行了
 if(this.AntiShake){
  //message提示用duration将提示时间设为一秒
    this.$message({
        message: '抱歉，意见字数不得超过200个字',
        type: 'error',
        duration: 1000
    });
    //将this.AntiShake设为条件假
    this.AntiShake = false;
    //设置定时器  一秒后执行
    setTimeout(function(){
        //将this.AntiShake设为条件真
       this.AntiShake = true;
    }.bind(this),1000)
}

其实也很好理解 就是用定时器记录提示的时间
在定时器还没结束期间 阻止提示执行即可