实现 Vue 框架用户短时间内多次点击同一按钮仅触发一次
【摘要】
点击上方“青年码农”关注
回复“源码”可获取各种资料
使用 Vue 框架开发项目中，遇到个问题，就是在用户提交数据时，如果连续多次点击按钮，会触发多次，导致数据异常，因此需要限制用户短时间内多次点击同一按钮，只触发一次。
1. 自定义指令
利用元素的 disabled 属性，新建自定义指令，preventClic...
点击上方“青年码农”关注
回复“源码”可获取各种资料
使用 Vue 框架开发项目中，遇到个问题，就是在用户提交数据时，如果连续多次点击按钮，会触发多次，导致数据异常，因此需要限制用户短时间内多次点击同一按钮，只触发一次。
1. 自定义指令
利用元素的 disabled 属性，新建自定义指令，preventClick.js
-
1export default {
-
2 install(Vue) {
-
3 Vue.directive('preventClick', {
-
4 inserted(button, bind) {
-
5 button.addEventListener('click', () => {
-
6 if (!button.disabled) {
-
7 button.disabled = true;
-
8 setTimeout(() => {
-
9 but.disabled = false
-
10 }, 2000)
-
11 }
-
12 })
-
13 }
-
14 })
-
15 }
-
16}
在 main.js 中引入
组件中使用
2. 防抖函数
函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，直到函数请求停止并超过时间间隔才会执行。
-
1export function debounce(fn, delay = 2000) {
-
2 // 记录上一次的延时器
-
3 var timer = null;
-
4 return function() {
-
5 var args = arguments;
-
6 var that = this;
-
7 // 清除上一次延时器
-
8 clearTimeout(timer)
-
9 timer = setTimeout(function() {
-
10 fn.apply(that,args)
-
11 }, delay);
-
12 }
-
13}
导入到组件中使用
文章来源: blog.csdn.net，作者：NMGWAP，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/NMGWAP/article/details/126258726
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）