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

一、 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>
相关推荐
天天扭码1 分钟前
JavaScript 中 apply 和 call 方法的区别与应用场景
前端·javascript·面试
parade岁月4 分钟前
TypeScript 全局类型声明文件规范性分析与归纳
前端·vue.js·typescript
溪i6 分钟前
react-spring/web + children not defined
前端·spring·react.js
纪元A梦9 分钟前
华为OD机试真题——阿里巴巴找黄金宝箱Ⅰ(2025A卷:100分)Java/python/JavaScript/C/C++/GO最佳实现
java·c语言·javascript·c++·python·华为od·go
雨夜带刀_9 分钟前
Three.js 导入模型demo分析(随笔记)
前端
用户214118326360210 分钟前
dify案例分享-Qwen3 vs 传统合同审查,这场对决谁能胜出?
前端
egghead2631613 分钟前
trae+react+tailwindcss项目开发
前端·react.js
前端啵啵猪13 分钟前
基于qiankun实现子应用菜单级keep-alive
前端·javascript
徐小夕14 分钟前
写了一款3D可视化编辑器模版,开源!
前端·javascript·github
酱酱子耶17 分钟前
async没有了await会发生什么?实际问题
前端·react.js