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

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 接受哪些属性，但假设它为您提供与 button 相同的原始 HTML 道具：

<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
}

并在包含 <wizard-button>

的组件中的 data 中定义 loading

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

How to disable button after its pressed for short time or until function is comeplete

javascript

vue.js

buefy