当前位置:网站首页>按钮只能点击一次

按钮只能点击一次

2022-08-06 07:48:50_rosy

今天在使用添加按钮添加记录突然添加了好几条记录,把我都看呆了。然后反应过来是因为网络卡顿导致服务器没有反应重复发送了请求。

疯狂提示添加成功~~~

 

今天我分享两种方法:

第一种使用once事件修饰符

使用@click.once实现button只能点击一次,适用于提交表单记录或者进行数据库的操作

  1. once,只执行一次
  2. 只有在第一次点击时会执行,再次点击不会起作用

 <el-button type="primary" @click.once="绑定的事件" >确定</el-button>

 第二种自定义一个方法

自定义方法可以写下一个js文件中实现复用。这是参考一位大佬的文章,但是觉得在具体使用上不够小白,于是我就用自己的例子来演示一下下。

 首先我选择在src下的components文件下建立一个clickThrottle.js文件

clickThrottle.js文件内容:

/* 防止重复点击 */
let clickTimer = 0

function clickThrottle(interval = 3000) {
    let now = +new Date(); // 获取当前时间的时间戳
    let timer = clickTimer; // 记录触发事件的事件戳
	
    if (now - timer < interval) {
    // 如果当前时间 - 触发事件时的事件 < interVal,那么不符合条件,直接return false,
    // 不让当前事件继续执行下去
        return false;
    } else { 
    // 反之,记录符合条件触发了事件的时间戳,并 return true,使事件继续往下执行
        clickTimer = now;
        return true;
    }
}

export default clickThrottle

 引入文件

import antiShake from '@/components/clickThrottle'

 

 使用:

 

好吧这波我称之为妈妈级教学,如果对你有帮助欢迎点赞评论收藏哟(o´ω`o)و

 效果图:

 

 参考文章地址:http://t.csdn.cn/9g1m3

原网站

版权声明
本文为[_rosy]所创,转载请带上原文链接,感谢
https://blog.csdn.net/qq_51580852/article/details/126185538

随机推荐