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

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

全局定义,方便调用

新建plugins.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 || 3000)
}
})
}
})
}
}

在main.js引用

按钮调用直接加v-preventReClick

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

【vue开发】超简单的防止连续点击js指令方法的更多相关文章

  1. 超简单的OpenGL & WebGL & Three.js介绍_1

    专业解释 什么是OpenGL OpenGL(Open Graphics Library即开放图形库或者“开放式图形库”)是用于渲染2D.3D矢量图形的跨语言.跨平台的应用程序编程接口(API). 这个 ...

  2. vue中超简单的方法实现点击一个按钮出现弹框,点击弹框外关闭弹框

    效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" ...

  3. 用 Vue 开发一个简单的答题应用(一)

    Vue 之类的 MVVM 框架,能帮助我们用更少的代码实现复杂的业务. 为了简单一点,开发计划分成三阶段: 一,数据写死,实现基本的答题效果.支持多种题型. 二,使用本地存储保存数据,支持题目录入的功 ...

  4. vue H5 超简单的swiper制作抖音上拉切换视频播放

    -----html部分------ <swiper vertical :style="{height: windowheight+'px',width:375+'px'}" ...

  5. 用vue开发一个app(2,main.js)

    昨天跟着vue的官网搭建了vue的一个脚手架,我也是第一次用VUE一切都在摸索阶段. 今天试着看下里面脚手架里面有点什么东西 先看看main.js 导入了3个模块 一个vue,一个app,还有rout ...

  6. 超简单的JNI——NDK开发教程

    不好意思各位,我按照网上一些教程进行JNI开发,折腾了半天也没成功,最后自己瞎搞搞定了,其实超简单的,网上的教程应该过时了,最新版的AS就包含了NDK编译的功能,完全不用手动javah,各种包名路径的 ...

  7. vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题

    异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...

  8. 从零开始搭建一个简单的基于webpack的vue开发环境

    原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...

  9. TypeC一个微软开发的超简单.NET依赖注入/IoC容器

    控制反转(IoC,Inversion of Control)是由Martin Fowler总结出来的一种设计模式,用来减少代码间的耦合.一般而言,控制反转分为依赖注入(Dependency Injec ...

随机推荐

  1. vs Qt mysql 打包程序 Driver not loaded Driver not loaded

    vs下开发Qt连接mysql程序,开发过程中操作MySQL没有问题,但打包以后安装在别的电脑上发现竟然无法连接MySQL,打包的时候,所需的libmysql.dll等dll文件拷贝到exe同级目录了, ...

  2. 使用 evo 工具评测 VI ORB SLAM2 在 EuRoC 上的结果

    http://www.liuxiao.org/2017/11/%E4%BD%BF%E7%94%A8-evo-%E5%B7%A5%E5%85%B7%E8%AF%84%E6%B5%8B-vi-orb-sl ...

  3. Linux记录-centos升级python3

    yum install zlib-devel bzip2-devel openssl-devel ncurses-devel -yyum install xz -ywget https://www.p ...

  4. python初级 0 出发吧

    一.与Python交互 键入命令(指令)后,Python立即执行这个命令 1 进入notebook交互编程环境 进入notebook环境, 点击New菜单下的Python 3环境进入到交互编程环境 2 ...

  5. Oracle索引 详解

    作者:Dave 一.索引介绍 1.1 索引的创建语法: CREATE UNIUQE | BITMAP INDEX <schema>.<index_name> ON <sc ...

  6. 【438】Python 处理文件

    1. 读取文件,计算 tweets 数目 python中readline判断文件读取结束的方法 line == '' python:如何检查一行是否为空行 line == '\n' or line = ...

  7. iOS App Store网址的命名规则

    App Store 命名规则:https://itunes.apple.com/cn/app/ +  拼音(最多6个,全部小写,空格要-) +  /id  +appID 一些参考实例: http:// ...

  8. deployment.yaml 带同步时区

    [root@lab2 dandang]# cat dandang.v1.yaml apiVersion: v1 kind: ReplicationController metadata: name: ...

  9. 压力测试 Apache ab

    https://www.jianshu.com/p/166a4ea8aade https://httpd.apache.org/docs/2.4/programs/ab.html 安装: 按照提示安装 ...

  10. idea里面lombok要如何设置后才会生效

    16:31 Lombok Requires Annotation Processing Annotation processing seems to be disabled for the proje ...