Как отключить кнопку после ее кратковременного нажатия или до завершения функции - PullRequest
Новая
       12

Как отключить кнопку после ее кратковременного нажатия или до завершения функции

0 голосов
/ 29 апреля 2019

У меня есть кнопка отправки формы, которая при нажатии загружает изображение, а затем возвращает вас на панель инструментов. Однако если вы продолжаете нажимать кнопку во время загрузки, она будет загружать одно и то же изображение снова и снова.

я использую vue и buefy. 

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

in donePressed () 

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

Полагаю, мне нужно что-то здесь положить, но я не знаю, что и как сделать с кнопкой

В идеале, я хотел бы отключить кнопку до тех пор, пока функции не закончили работать, но, вероятно, будет достаточно отключения ее на 3 секунды. Любая помощь приветствуется. Спасибо

1 Ответ

1 голос
/ 29 апреля 2019

Нет способа узнать, какие свойства wizard-button принимает, но при условии, что он дает вам те же необработанные реквизиты 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>

...