解决element ui message 弹框连续点击弹出问题

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

Hello!掘金的小伙伴们大家好，我是 摸鱼小公举 ,上一篇文章 # Vuex 简单而详细的描述，效果不错比较之前的文章浏览量,点赞量和评论量已经有了明显的提高了;谢谢掘金小伙伴的支持!以后还请多多给些建议;今天我们来复盘一下我之前写项目时遇到的一个问题;就是element ui message 弹框连续点击弹出问题;在上家公司遇到的,这家公司问了一下大佬,没想到这么简单!

正文开始啦~

首先我们来看一下出现问题的效果图

其实这样的效果给用户的体验是非常不好的,不排除些用户使用此功能时非常不友好会连续点好多下;关键是一连串的提示还没等上一条提示消失下一条就一直叠加,要等到全部提示消失还是花一些时间才能全部自动关闭完;

解决方法

好了我们来看一下解决此问题的方法;上代码

//这里的实现大概的逻辑就是自己设置时长多少毫秒后再次执行此弹框的方法
在自己设置的时长内只会执行一次;

//这个是会被连续点击的事件

messageCilck() {
 if (this.preventDuplicateClicks(2000)) {
      return false;
 }
 this.$message.success("设置成功!!!!!!!!");
 },
 
 
 //这个是阻止message 弹框连续点击弹出的方法
 
preventDuplicateClicks(timeLengtn) {
      //跟button设置disable差不多的逻辑
      if (!this.isClick) {       
        this.isClick = true;
        setTimeout(() => {
          this.isClick = false;
        }, timeLengtn);
        return false;
      } else {
        return true;
      }
    },

怎么样看完代码后是不是觉得特别简单

这个方法其实特别好用一点也不比防抖函数差,而且我还常常用于连续点击连续请求的场景上;好了你们也可以来试试;如果是换成阻止接口连续点击请求,那么把this.$message.success("设置成功!!!!!!!!"); 换成请求的请求接口调用的方法就好了;

结语

又到了文章的结尾;希望这篇文章能帮到大家;

然后 ( 点赞+评论+关注 ) 有问题可以来互相交流一下