Vue 自定义指令封装实现防抖 防止按钮暴力点击

本来项目前期没有做按钮防抖功能 快结束时才想起来 然后一个个写太慢了 然后就想着封装一下
vue3:新建directive.js

1. export default {
2.     //自定义节流操作
3.     preventReClick: {
4.         mounted(el, binding) {
5.             el.addEventListener('click', () => {
6.                 if (!el.disabled) {
7.                     el.disabled = true
8.                     setTimeout(() => {
9.                         el.disabled = false
10.                     }, binding.value || 2000) //2000ms间隔时间
11.                 }
12.             })
13.         }
14.     }
15. }

复制代码

然后在全局注册指令

1. // 点击防抖注册
2. import dir from '../src/utils/directive'
3. const app = createApp(App);
4. app.directive('preventReClick', dir.preventReClick);

复制代码

最后使用的时候  v-preventReClick如果不指定延迟时间 会默认为设置的2000

1. <el-button v-preventReClick="500" type="primary" @click="login()">登录</el-button>

复制代码

vue2  用法一样 大家也可以提取出来到js封装一下 用法跟上面一样

1. // 防抖函数
2. Vue.directive('throttle', {
3.   bind: (el, binding) => {
4.     let throttleTime = binding.value; // 节流时间
5.     if (!throttleTime) { // 用户若不设置节流时间，则默认2s
6.       throttleTime = 2000;
7.     }
8.     let cbFun;
9.     el.addEventListener('click', event => {
10.       if (!cbFun) { // 第一次执行
11.         cbFun = setTimeout(() => {
12.           cbFun = null;
13.         }, throttleTime);
14.       } else {
15.         event && event.stopImmediatePropagation();
16.       }
17.     }, true);
18.   },
19. });

复制代码

注: 这个只对饿了吗组件库的按钮类点击事件管用
如果是div一类的点击事件 用下面常用的方法把

1. // 表情评分防抖实现
2. const debouncedUpdateCount = function (id, item, num) {
3.     if (debounceTimeout.value) {
4.         clearTimeout(debounceTimeout.value);
5.     }
6.     debounceTimeout.value = setTimeout(() => {
7.         updateCount(id, item, num);
8.     }, 500); // 调整延迟时间（毫秒）
9. };
12. const updateCount = (id,item,num) =>{
13.         /你的逻辑
14.     }
18.   
19.     <img src="https://www.cnblogs.com/../../assets/icons/garid1.png" alt="">
20.     <span>很差1分</span>

复制代码

 
总结：简单的对按钮进行了防抖封装，希望能帮到您，如有不对的地方还望您指正出来

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！