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>
相关推荐
前端的日常几秒前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常2 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
ccc10186 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端
Struggler28113 分钟前
Chrome插件开发
前端
前端 贾公子25 分钟前
Monorepo + vite 怎么热更新
前端
coding随想34 分钟前
掌控网页的魔法之书:JavaScript DOM的奇幻之旅
开发语言·javascript·ecmascript
然我1 小时前
不用 Redux 也能全局状态管理?看我用 useReducer+Context 搞个 Todo 应用
前端·javascript·react.js
前端小巷子1 小时前
Web 实时通信:从短轮询到 WebSocket
前端·javascript·面试
神仙别闹1 小时前
基于C#+SQL Server实现(Web)学生选课管理系统
前端·数据库·c#
web前端神器1 小时前
指定阿里镜像原理
前端