Vue.js 基于el-button封装一个防抖节流按钮

业务场景：
实际开发中，为了防止用户多次按钮点击触发接口请求，例如单据提交等业务场景，可对el-button进行二次封装，利用防抖节流原理实现

完整代码：

<script>
// el-button按钮的二次封装
import {
    
     Button } from "element-ui";
export default {
    
    
  name: "debounce-button",
  extends: Button, // 继承element-ui的Button控件
  data() {
    
    
    return {
    
    
      delay: 500,
      timer: null,
      valid: true, // 按钮有效与否，true: 有效,false: 失效
    };
  },
  methods: {
    
    
    // 防抖：某个时间期限（如500毫秒）内，事件处理函数只执行一次
    debounceClick(evt) {
    
    
      //触发用户点击对应函数
      this.$emit("click", evt);
      this.valid = false;
      this.timer && clearTimeout(this.timer);
      this.timer = setTimeout(() => {
    
    
        this.valid = true;
      }, this.delay);
    },
    // 节流：函数执行一次之后，该在指定的时间（如500毫秒）期限内不再工作，直至过了这段时间才重新生效
    throttleClick(evt) {
    
    
      let _this = this;
      // 触发事件之后禁止再次点击
      setTimeout(() => {
    
    
        // delay秒之后可再次点击
        _this.valid = true;
      }, this.delay);
      //节流
      if (_this.valid) {
    
    
        _this.valid = false;
        // 触发用户点击对应函数
        _this.$emit("click", evt);
      }
    },
    // 重写Button控件中的点击事件handleClick
    handleClick(evt) {
    
    
      // 按钮无效, 阻止事件继续执行
      if (!this.valid) {
    
    
        return;
      }
      // 防抖
      this.debounceClick(evt);
    },
  },
};
</script>