24. Vue防抖，禁止double click

Vue 防抖

如果按钮不做防抖限制，用户手滑或者其他场景大概率会出现重复调用接口的情况，比如编辑角色时，多次点击submit，会出现非预期请求。

为避免重复点击问题，可以加一个自定义组件将按钮禁用一段时间。

监听click时间，单击时将对象禁用2s

#vim resources/src/directive/no-more-click/click.js
function click(el, binding) {el.addEventListener('click', e => {el.classList.add('is-disabled');el.disabled = true;setTimeout(() => {el.disabled = false;el.classList.remove('is-disabled');}, 2000)})
}export default {inserted(el, binding) {click(el, binding)},update(el, binding) {click(el, binding)}
}

注册自定义组件

#vim resources/src/directive/no-more-click/index.js
import click from './click'const install = function (Vue) {Vue.directive('no-more-click', click)
};if (window.Vue) {window['no-more-click'] = click;Vue.use(install); // eslint-disable-line
}click.install = install;
export default click#vim resources/src/main.js
// directive
import noMoreClick from '@/directive/no-more-click';
Vue.use(noMoreClick);

应用（给按钮加上 v-no-more-click ）

<el-button v-no-more-click type="primary" @click="save">{{ $t('btn.submit') }}</el-button>

点击后按钮会disabled 2s。

24. Vue防抖，禁止double click相关推荐

Vue实现禁止链接打开
Vue提供了一个特殊的变量$event,用于访问原生DOM事件. <!doctype html> <html lang="en"><head>& ...
vue 防抖节流，开箱即用
vue 防抖节流,开箱即用在util下建个下图文件名将下方代码放到文件中 const debounce = (func, time, isDebounce, ctx) => {var tim ...
ALV GRID学习笔记----Double Click事件
10月底的时候进行了BC412课程的培训,课后自己做了一些实验,从今天开始就将这些实验记录下来,以便于以后需要使用的时候能够查询一下!(很遗憾的是公司组织了很多的培训,但是在实际工作中很少能够运到,所 ...
取消pycharm双击shift出现搜索框,但新版找不到ide.suppress.double.click.handler的问题解决
取消pycharm/IDEA双击shift出现搜索框,但新版找不到ide.suppress.double.click.handler的问题解决在使用Jetbrains产品时,例如IDEA.Pycha ...
Better Scroll+Vue、div的@click无效解决方法
better-scroll+Vue.div的@click无效解决方法正常情况,div可以直接点击 <template><div><div @click="di ...
Vue 防抖节流详细介绍（面试常客、去繁从简、性能优化）
本文主要介绍js中的防抖和节流以及在vue项目中如何使用它们来达到性能优化的目的. 前置知识点:js.闭包.es6.vue等. 使用背景: 很多场景下,页面具有交互性,免不了会触发一些事件以及发送一些 ...
Vue防抖（三种方式）
做个记录,三个方法 Vue最新防抖方案(必看篇) 1.debounce 函数防抖(debounce):当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次,如果设定的时间到来之前,又 ...
vue滚动条禁止_vue弹窗后如何禁止滚动条滚动？
常见场景在许多填写表单的页面中,都会弹出一个选择器,让你在弹窗中选择项目.有时,弹窗本身容纳不下内容,需要让它不断滚动来展示,但因为事件是冒泡的,有时就会造成底部(body 的Z-index肯定是在 ...
vue滚动条禁止_vue.js中实现禁止浏览器滚动方法
大家好,本次在开发项目中,点击按钮,弹出一个自定义的弹出窗口和遮罩层,因为页面的超出一屏,有滚动条,但是想让弹出窗时候,禁止浏览器滚动,那么就简单写一个方法给大家. 思路是这样的,当弹窗弹出时候,让b ...

24. Vue防抖，禁止double click

Vue 防抖

24. Vue防抖，禁止double click相关推荐

最新文章

热门文章