VUE3 防止按钮重复提交 工具函数

/**
 * @description  功能：防止按钮重复提交 CLASS 
 * @description 【提交】事件组合使用：用于防止重复提交，频繁点击按钮
 * @description 【标签使用】
 * @description  在带有 loading 和 disabled 标签里面使用：示例 <button> 标签
 * @description  或者自定义标签
 * @description  <button  :loading="saveSubmitRef.loading" 
 * @description        :disabled="saveSubmitRef.disabled" 
 * @description        @click="youSubmitEvent">
 * @description  </button>
 * @description
 * @description  在 JS 函数的代码使用示例：
 * @description 【实例化】
 * @description  const youSubmitEvent
 * @description    = ref<PreventDuplicateEntity>(new PreventDuplicateEntity());
 * @description 【你的函数】 
 * @descriptio   const youSubmitFun = async () => {
 * @description       saveSubmitRef.value.mixSubmitEvent(async () => {
 * @description         try {
 * @description             // 你的业务逻辑 ......
 * @description             // await  youFunction();
 * @description           } catch (error) {
 * @description
 * @description         }
 * @description     });
 * @description  }
 * @description
 */
export class PreventDuplicateEntity {
  // private
  private stopClickFlag: boolean = false;
  // public
  public loading: boolean = false;
  public disabled: boolean = false;
  // 构造函数实例化】
  constructor() {
    this.stopClickFlag = false;
    this.loading = false;
    this.disabled = false;
  }
  //【获取判断】
  public gePreventClick() {
    return this.stopClickFlag;
  }
  //【设置】
  public setPreventClick() {
    this.stopClickFlag = true;
    this.loading = true;
    this.disabled = true;
  }
  //【清除】
  public clearPreventClick() {
    let that = this;
    setTimeout(() => {
      that.stopClickFlag = false;
      that.loading = false;
      that.disabled = false;
    }, 500);
  }


/**
 * @description  功能：防止按钮重复提交 CLASS 
 * @description 【提交】事件组合使用：用于防止重复提交，频繁点击按钮
 * @description 【标签使用】
 * @description  在带有 loading 和 disabled 标签里面使用：示例 <button> 标签
 * @description  或者自定义标签
 * @description  <button  :loading="saveSubmitRef.loading" 
 * @description        :disabled="saveSubmitRef.disabled" 
 * @description        @click="youSubmitEvent">
 * @description  </button>
 * @description
 * @description  在 JS 函数的代码使用示例：
 * @description 【实例化】
 * @description  const saveSubmitRef
 * @description    = ref<PreventDuplicateEntity>(new PreventDuplicateEntity());
 * @description 【你的函数】 
 * @descriptio   const youSubmitEvent= async () => {
 * @description       saveSubmitRef.value.mixSubmitEvent(async () => {
 * @description         try {
 * @description             // 你的业务逻辑 ......
 * @description             // await  youFunction();
 * @description           } catch (error) {
 * @description
 * @description         }
 * @description     });
 * @description  }
 * @description
 */
  public async mixSubmitEvent(submitHandleFun: Function) {
    if (this.stopClickFlag) {
      uni.showToast({ title: '处理中,请稍后......', icon: 'none' });
      return;
    }
    { //【设置】
      this.stopClickFlag = true;
      this.loading = true;
      this.disabled = true;
    }
    try {// 执行 【你的业务逻辑】
      await submitHandleFun();
    } catch (error) {
      console.log(error);
    }
    { //【清除】
      let that = this;
      setTimeout(() => {
        that.stopClickFlag = false;
        that.loading = false;
        that.disabled = false;
      }, 500);
    }
  }




}