一、通过指令

directive/noMoreClick.js

import Vue from 'vue'
Vue.directive('noMoreClick', {
  inserted(el, binding) {
    el.addEventListener('click', e => {
      el.classList.add('is-disabled')
      el.disabled = true
      setTimeout(() => {
        el.disabled = false
        el.classList.remove('is-disabled')
      }, 2000)
    })
  }
})

main.js

import './directive/noMoreClick'

使用：

  <div @click="divClick">
    <el-button v-no-more-click @click="btnClick">防抖按钮</el-button>
  </div>
  
  
  methods: {
    btnClick(){
      console.log('btnClick')
    },
    divClick() {
      console.log("divClick");
    },
  },

效果：

二、封装DebounceButton组件

components/DebounceButton/index.vue

<template>
  <el-button @click="handleClick" v-bind="$attrs">
    <slot />
  </el-button>
</template>
<script>
// import debounce from "lodash/debounce";
function debounce(cb, delay) {
  var timer = null;
  return function () {
    if (timer) clearTimeout(timer);
    var _this = this;
    var _arguments = arguments;
    timer = setTimeout(function () {
      cb.apply(_this, _arguments);
    }, delay);
  };
}

export default {
  name: "DebounceButton",
  data() {
    const debounceClick = debounce((event) => {
      this.$emit("click", event);
    }, 500);
    return { debounceClick };
  },
  methods: {
    handleClick(event) {
      this.debounceClick(event);
    },
  },
};
</script>

main.js

import DebounceButton from '@/components/DebounceButton'


Vue.component(DebounceButton.name, DebounceButton)

使用：

  <div @click="divClick">
    <DebounceButton @click="btnClick" type="primary">防抖按钮</DebounceButton>
  </div>
  
  
  methods: {
    btnClick(){
      console.log('btnClick')
    },
    divClick() {
      console.log("divClick");
    },
  },

效果：