vue 防止按钮重复点击

在后台使用过程中，经常会因为按钮重复点击，而造成发送多次重复请求以下方法可以避免这种情况

在man.js写入一下代码

//重复点击指令  <el-button type="primary" @click="onSubmit" v-preventReClick>查询</el-button>
v-preventReClick=“1000”
//在按钮上加入v-preventReClick可以达到防止重复提交的目的，v-preventReClick=“1000”为1秒内禁止提交
import preventReClick from './utils/preventRepeatClick.js'
Vue.use(preventReClick);

在utils文件夹里创建preventRepeatClick.js，以下代码是preventRepeatClick.js里的代码

export default {install (Vue) {Vue.directive('preventReClick', {inserted(el, binding) {el.addEventListener('click', () => {if(!el.disabled) {el.disabled = true;setTimeout(() => {el.disabled = false;}, binding.value || 1000);}})}})}
}

vue 防止按钮重复点击相关推荐

解决Vue提交按钮重复点击重复提交问题防抖
1秒内只能提交一次 1.创建js文件preventReClick.js export default {install (Vue) {// 防止重复点击Vue.directive('preventRe ...
vue中防止按钮重复点击提交的方法
vue中防止按钮重复点击提交的方法 vue中防止按钮重复点击提交的方法一.自定义全局指令二.自定义局部指令三.动态控制disabled属性 vue中防止按钮重复点击提交的方法经常会遇到的一个问 ...
前端多次点击button_对于防止按钮重复点击的尝试详解
导语:随着接触的项目增加,很多项目都是遇到同样的问题,而每次都是使用一贯的手法进行处理.有时候有些方法并不是那么的优雅甚至有些冗余,所以自己也想开始尝试不同的方法去解决同样的问题. 我经常在项目中会遇 ...
android按钮防止重复点击事件,实例详解Android解决按钮重复点击问题
为了防止用户或者测试MM疯狂的点击某个button,写个方法防止按钮连续点击.具体实例代码如下所示: public class BaseActivity extends Activity { prot ...
防止按钮重复点击模型转字典接口传参不能用汉字,要转码
#pragma mark -- 发表评论 - (IBAction)publishBtn:(id)sender {if ([self.commentType isEqualToString:@" ...
php重复点击按钮无效,完美解决UIButton按钮重复点击、多次响应的问题
最近测试老跑过来提bug,说按钮可以点好几次,然后蹦出来好几个一样的界面出来,解决了一个地方,其他地方也会冒出一样的问题来,仔细一想,还是要从根本上解决问题,于是想了几个方法: 1.添加UIButto ...
VUE router 导航重复点击报错的问题解决两种方案
VUE router 导航重复点击报错的问题解决两种方案前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家 ...
Asp.Net避免按钮重复点击
在CSDN的论坛上,经常有一些朋友询问有关按钮重复点击的问题.我也做过多次回答,但是为了解决更多朋友的问题,在这里,我把实现方法再次讲解一下,由于本人能力有限,有什么不对的地方,还请各位朋友指教. 首 ...
对于防止按钮重复点击的尝试
导语:随着接触的项目增加,很多项目都是遇到同样的问题,而每次都是使用一贯的手法进行处理.有时候有些方法并不是那么的优雅甚至有些冗余,所以自己也想开始尝试不同的方法去解决同样的问题. 我经常在项目中会遇 ...

vue 防止按钮重复点击

vue 防止按钮重复点击

vue 防止按钮重复点击相关推荐

最新文章

热门文章