【vue开发】超简单的防止连续点击js指令方法
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指令方法的更多相关文章
- 超简单的OpenGL & WebGL & Three.js介绍_1
专业解释 什么是OpenGL OpenGL(Open Graphics Library即开放图形库或者“开放式图形库”)是用于渲染2D.3D矢量图形的跨语言.跨平台的应用程序编程接口(API). 这个 ...
- vue中超简单的方法实现点击一个按钮出现弹框,点击弹框外关闭弹框
效果图展示: View层 <template> <div> <div class="mask" v-if="showModal" ...
- 用 Vue 开发一个简单的答题应用(一)
Vue 之类的 MVVM 框架,能帮助我们用更少的代码实现复杂的业务. 为了简单一点,开发计划分成三阶段: 一,数据写死,实现基本的答题效果.支持多种题型. 二,使用本地存储保存数据,支持题目录入的功 ...
- vue H5 超简单的swiper制作抖音上拉切换视频播放
-----html部分------ <swiper vertical :style="{height: windowheight+'px',width:375+'px'}" ...
- 用vue开发一个app(2,main.js)
昨天跟着vue的官网搭建了vue的一个脚手架,我也是第一次用VUE一切都在摸索阶段. 今天试着看下里面脚手架里面有点什么东西 先看看main.js 导入了3个模块 一个vue,一个app,还有rout ...
- 超简单的JNI——NDK开发教程
不好意思各位,我按照网上一些教程进行JNI开发,折腾了半天也没成功,最后自己瞎搞搞定了,其实超简单的,网上的教程应该过时了,最新版的AS就包含了NDK编译的功能,完全不用手动javah,各种包名路径的 ...
- vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟,连续点击无反应的问题
异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...
- 从零开始搭建一个简单的基于webpack的vue开发环境
原文地址:https://segmentfault.com/a/1190000012789253?utm_source=tag-newest 从零开始搭建一个简单的基于webpack的react开发环 ...
- TypeC一个微软开发的超简单.NET依赖注入/IoC容器
控制反转(IoC,Inversion of Control)是由Martin Fowler总结出来的一种设计模式,用来减少代码间的耦合.一般而言,控制反转分为依赖注入(Dependency Injec ...
随机推荐
- vs Qt mysql 打包程序 Driver not loaded Driver not loaded
vs下开发Qt连接mysql程序,开发过程中操作MySQL没有问题,但打包以后安装在别的电脑上发现竟然无法连接MySQL,打包的时候,所需的libmysql.dll等dll文件拷贝到exe同级目录了, ...
- 使用 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 ...
- Linux记录-centos升级python3
yum install zlib-devel bzip2-devel openssl-devel ncurses-devel -yyum install xz -ywget https://www.p ...
- python初级 0 出发吧
一.与Python交互 键入命令(指令)后,Python立即执行这个命令 1 进入notebook交互编程环境 进入notebook环境, 点击New菜单下的Python 3环境进入到交互编程环境 2 ...
- Oracle索引 详解
作者:Dave 一.索引介绍 1.1 索引的创建语法: CREATE UNIUQE | BITMAP INDEX <schema>.<index_name> ON <sc ...
- 【438】Python 处理文件
1. 读取文件,计算 tweets 数目 python中readline判断文件读取结束的方法 line == '' python:如何检查一行是否为空行 line == '\n' or line = ...
- iOS App Store网址的命名规则
App Store 命名规则:https://itunes.apple.com/cn/app/ + 拼音(最多6个,全部小写,空格要-) + /id +appID 一些参考实例: http:// ...
- deployment.yaml 带同步时区
[root@lab2 dandang]# cat dandang.v1.yaml apiVersion: v1 kind: ReplicationController metadata: name: ...
- 压力测试 Apache ab
https://www.jianshu.com/p/166a4ea8aade https://httpd.apache.org/docs/2.4/programs/ab.html 安装: 按照提示安装 ...
- idea里面lombok要如何设置后才会生效
16:31 Lombok Requires Annotation Processing Annotation processing seems to be disabled for the proje ...