javascript - 如何在短时间按下按钮或直到功能完成后禁用按钮

Question

我有一个提交表单按钮，按下该按钮会上传图像，然后将您带回仪表板。但是，如果您在上传过程中一直按下按钮，它将一遍又一遍地上传相同的图像。

我正在使用 vue 和 buefy。

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

在 donePressed()

    donePressed() {
      bus.$emit('i-got-clicked', '')
    },

我想我需要在这里放一些东西，但我不知道该按钮是什么以及如何做

理想情况下，我喜欢禁用按钮，直到功能完成运行，但禁用它 3 秒可能就足够了。任何帮助表示赞赏。谢谢

Answer 1

无法知道wizard-button接受哪些属性，但假设它为您提供与 a 相同的原始 HTML 道具button：

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

async donePressed() {
  this.loading = true // set this before running anything
  await new Promise((resolve, reject) => {
    //do all your functions in here, then call resolve()

    resolve()
  })

  //now you can update the loading variable
  this.loading = false
}

并loading在您data的组件外壳中定义<wizard-button>