vue中实现button按钮的重复点击指令

csharp 复制代码
// 注册一个全局自定义指令 `v-debounce`
Vue.directive('debounce', {
  // 当被绑定的元素插入到 DOM 中时...
  inserted: function (el, binding) {
    let timer;
    el.addEventListener('click', () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        binding.value(); // 调用传给指令的方法
      }, 500);
    });
  },
  // 当绑定元素的父组件更新时...
  update: function (el, binding) {
    let timer;
    el.addEventListener('click', () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        binding.value(); // 调用传给指令的方法
      }, 500);
    });
  }
});

// 使用指令
// 在组件中
<template>
  <button v-debounce="myClickHandler">Click me</button>
</template>

<script>
export default {
  methods: {
    myClickHandler() {
      // 处理点击事件
    }
  }
}
</script>
相关推荐
蓝婷儿14 分钟前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐15 分钟前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠19 分钟前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农19 分钟前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛44 分钟前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵1 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6221 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9491 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
唐叔在学习1 小时前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器
AliciaIr1 小时前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js