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 分钟前
手写一个axios方法
前端·vue.js·axios
XinZong20 分钟前
【VSCode插件推荐】想准时下班,你需要codemoss的帮助,分享AI写代码的愉快体验,附详细安装教程
前端·程序员
ErvinHowell27 分钟前
文件MD5生成性能大提升!如何实现分片与Worker优化
前端·vue.js·算法
想做白天梦43 分钟前
LeetCode :150. 逆波兰表达式求值(含求后缀表达式和中缀转后缀表达式)
java·前端·算法
迃-幵1 小时前
力扣:225 用队列实现栈
android·javascript·leetcode
s甜甜的学习之旅2 小时前
前端js处理list(数组)
开发语言·前端·javascript
小布布的不2 小时前
MyBatis 返回 Map 或 List<Map>时,时间类型数据,默认为LocalDateTime,响应给前端默认含有‘T‘字符
前端·mybatis·springboot
aPurpleBerry2 小时前
Vue3+axios+Vite配置Proxy代理解决跨域
前端·javascript·vue.js
星月前端2 小时前
【vue-pdf】简单封装pdf预览组件
javascript·vue.js·pdf
JustCouvrir2 小时前
macOS|前端工程部署到Nginx服务器
服务器·前端·nginx