vue封装防重复点击事件，并全局挂载使用

SmileAgain -lg2024-07-22 13:02

一、 vue3.0封装防重复点击事件

1、创建防重复点击的js文件，在js文件中添加防重复点击的方法

在utils文件夹中(可以和普通工具类存放一起，也可以按自己需求存放)创建js文件 preventReClick.js

javascript 复制代码

// 防止处理多次点击
function noMultipleClicks(methods, info) {
    // methods是需要点击后需要执行的函数， info是点击需要传的参数
    let that = this;
    if (that.noClick) {
        // 第一次点击
        that.noClick= false;
        if(info && info !== '') {
            // info是执行函数需要传的参数
            methods(info);
        } else {
            methods();
        }
        setTimeout(()=> {
            that.noClick= true;
        }, 1000)//时间可以自己定义
    } else {
        // 这里是重复点击的判断
    }
}
//导出
export default {
    noMultipleClicks,//禁止多次点击
}

二、在main.js中全局挂载防重复点击方法

javascript 复制代码

import Vue from 'vue' 
  //配置全局属性
  
Vue.prototype.$preventReClick = preventReClick.noMultipleClicks;

三、在页面中使用

javascript 复制代码

<template>
 <button class="submit-style" @click="this.$preventReClick(submitBtn)">提交</button>
</template>

<script setup>
data() {
			return {
				noClick: true, //防止重复点击字段
			};
		},
</script>