Vue+Buefy实现按钮点击后禁用至操作完成或短时间禁用

Got it, let's fix that double-click upload issue for you. Since you're using Vue and Buefy, we can solve this with a simple state variable to control the button's disabled status. Here are two approaches depending on your needs:

This is the better long-term solution, as it ensures the button stays disabled only until your upload/navigation logic fully completes—no arbitrary timing guesswork.

Step 1: Add a disable state to your component #

First, add a boolean variable in your component's data to track the button's disabled status:

export default {
  data() {
    return {
      isButtonDisabled: false
    }
  },
  // ... rest of your component code
}

Step 2: Bind the state to your button #

Update your wizard-button to use this state for its disabled prop (most custom button components support the standard disabled attribute, which Buefy's buttons do):

<wizard-button 
  v-else 
  @click.native="donePressed" 
  :style="props.fillButtonStyle" 
  :disabled="isButtonDisabled"
>
  {{props.isLastStep ? 'Done' : 'Next'}}
</wizard-button>

Step 3: Update your donePressed method #

Modify the method to enable the disabled state immediately on click, then disable it once your upload/navigation logic finishes. Since you're using an event bus, you'll need to listen for a "complete" event from the logic that handles the upload:

donePressed() {
  // Disable the button right away
  this.isButtonDisabled = true;

  // Emit your click event as before
  this.bus.$emit('i-got-clicked', '');

  // Listen for the upload/operation completion event
  // (You'll need to make sure the code handling 'i-got-clicked' emits this event when done)
  const cleanup = this.bus.$once('upload-operation-completed', () => {
    this.isButtonDisabled = false;
    cleanup(); // Clean up the listener to avoid memory leaks
  });

  // Add a fallback in case the completion event never fires (e.g., network error)
  setTimeout(() => {
    this.isButtonDisabled = false;
    cleanup();
  }, 10000); // 10-second timeout as a safety net
}

Note: You'll need to modify the code that handles the i-got-clicked event to emit upload-operation-completed once the upload and navigation to the dashboard are fully finished.

If you need a quick fix without modifying the event bus logic, you can disable the button for a fixed 3-second window:

Step 1 & 2: Same as above (add state and bind to button) #

Use the same isButtonDisabled state and button binding from方案1.

Step 3: Update donePressed with a timeout #

donePressed() {
  // Disable immediately
  this.isButtonDisabled = true;

  // Emit your click event
  this.bus.$emit('i-got-clicked', '');

  // Re-enable after 3 seconds
  setTimeout(() => {
    this.isButtonDisabled = false;
  }, 3000);
}

Keep in mind: This is a temporary fix—if your upload takes longer than 3 seconds, users could still click again before the operation finishes. Use方案1 for a robust solution.

内容的提问来源于stack exchange，提问作者swiftie1989