vue防重复点击(指令实现)

快速点击按钮会重复多次调用接口，防止出现这样的情况

全局定义，方便调用

新建plugins.js

export default {install (Vue) {// 防重复点击(指令实现)Vue.directive('preventReClick', {inserted (el, binding) {el.addEventListener('click', () => {if (!el.disabled) {el.disabled = truesetTimeout(() => {el.disabled = false}, binding.value || 3000)}})}})}
}

在main.js引用

按钮调用直接加v-preventReClick

<el-button type="prismary" style="width:100%;" @click="handleSubmit" v-preventReClick></el-button>

亲测可用

转载于:https://www.cnblogs.com/adbg/p/11271237.html

vue防重复点击(指令实现)相关推荐

vue --- 按钮的防重复点击事件
按钮的防重复点击事件 :loading属性当loading = true时:按钮会显示一个旋转的圆圈.此时的按钮是无法点击的当loading = false时:按钮重新变为可点击的状态可以通过使 ...
springboot 主键重复导致数据重复_Springboot实现防重复提交和防重复点击（附源码）...
背景# 同一条数据被用户点击了多次,导致数据冗余,需要防止弱网络等环境下的重复点击目标# 通过在指定的接口处添加注解,实现根据指定的接口参数来防重复点击说明# 这里的重复点击是指在指定的时间段内多 ...
Vue路由重复点击报错解决
Vue路由重复点击时会出现报错 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current ...
由防重复点击引发的幂等性问题思考
HTTP/1.1中对幂等性的定义是:一次和多次请求某一个资源对于资源本身应该具有同样的结果(网络超时等问题除外).也就是说,用户对于同一操作发起的一次请求或者多次请求的结果是一致的,不会因为多次点击而 ...
解决Vue中重复点击相同路由控制台报错问题
vue-router 升级到3.1.x 后,重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但也不能视而不见. 报错信息报错原因 vue router ≥ v3.1 后 ,回调形式改成prom ...
四种解决Vue中重复点击相同路由控制台报错问题（ Avoided redundant navigation to current location）
vue-router 升级到3.1.x 后,重复点击导航时,控制台出现报错 ,虽然不影响功能使用,但是看的就不舒服. 报错信息 Uncaught (in promise) NavigationDupl ...
vue 解决重复点击导航路由报错问题
// 解决重复点击导航路由报错 const originalPush = VueRouter.prototype.push VueRouter.prototype.push = function pu ...
表单重复提交（前端未做单击防重复点击策略）
表单重复提交导致重复添加,用token解决:提交前的请求会给前端一token,后端将这token存在缓存中,表单提交时要带上这token,后端校验token通过执行业务逻辑,后端并删除缓存中的tok ...
解决vue项目重复点击跳转路由报错以及路由重定向的问题
// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题 const originalPush = VueRouter.prototype.push VueRout ...

vue防重复点击(指令实现)

vue防重复点击(指令实现)相关推荐

最新文章

热门文章