Vue中的全局指令防止按钮重复点击

目录 全局指令防止按钮重复点击 1测试数据mon.js 2.在需要引入的页面引入（**.vue） 防重复点击(vue指令实现) 阻止快速点击按钮会重复多次调用接口的

全局指令防止按钮重复点击

1测试数据mon.js

首先引入Vue

import Vue from 'vue';
const preventReClick = Vue.directive('preventReClick', {
? inserted: function (el, binding) {
? ? el.addEventListener('click', () => {
? ? ? if (!el.disabled) {
? ? ? ? el.disabled = true
? ? ? ? setTimeout(() => {
? ? ? ? ? el.disabled = false
? ? ? ? }, binding.value || 3000)
? ? ? }
? ? ? console.log(el.disabled)
? ? })
? }
});
?
export {
? preventReClick
}

2.在需要引入的页面引入（**.vue）

在按钮上添加v-preventReClick

<el-button ?size="small" type="primary" @click="handleSave('form')" v-preventReClick>确定</el-button>

从common.js导入指令preventReClick

import preventReClick from 'common' //防多次点击，重复提交

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

阻止快速点击按钮会重复多次调用接口的

定义全局指令

// directive.js
export default {
? install (Vue) {
? ? // 防重复点击(指令实现)
? ? Vue.directive('repeatClick', {
? ? ? inserted (el, binding) {
? ? ? ? el.addEventListener('click', () => {
? ? ? ? ? if (!el.disabled) {
? ? ? ? ? ? el.disabled = true
? ? ? ? ? ? setTimeout(() => {
? ? ? ? ? ? ? el.disabled = false
? ? ? ? ? ? }, binding.value || 1000)
? ? ? ? ? }
? ? ? ? })
? ? ? }
? ? })
? }
}

在main.js引用

import directive from 'directive.js';
vue.use(directive );

按钮调用直接加v-preventReClick

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

以上为个人经验，希望能给大家一个参考，也希望大家多多支持。 

查看更多关于Vue中的全局指令防止按钮重复点击的详细内容...