Для новичков в Vue: напишите простую кнопку обратного отсчета

внешний интерфейс Vue.js

В разработке проекта мы часто сталкиваемся с кнопкой, которая отправляет код подтверждения и нажимает 60-секундный обратный отсчет.Это очень распространено, но также очень просто, но при написании этой кнопки есть на что обратить внимание.Напишите ее сегодня , Если у вас есть какие-либо вопросы, пожалуйста, поправьте меня!

Готовый эффект выглядит следующим образом:

Для того, чтобы показать эффект быстрее, я установил время на 5 секунд. После нажатия кнопки появится обратный отсчет, и кнопка станет некликабельной, стиль также изменится, а также изменится внешний вид наведения мыши.

Затем мы используем код для достижения:

<button class="button" @click="countDown">
  {{content}}
</button>

...

data () {
    return {
      content: '发送验证码',   // 按钮里显示的内容
      totalTime: 60           //记录具体倒计时时间
    }
},
methods: {
    countDown() {
        let clock = window.setInterval(() => {
            this.totalTime--
            this.content = this.total + 's后重新发送'
        },1000)
    }
}

К данным добавляются две части данных, одна используется для записи времени, а другая используется для хранения определенного содержимого кнопки обратного отсчета. В функции countDown мы используем таймер setInterval, который каждую секунду вычитает 1 из totalTime и одновременно изменяет содержимое, отображаемое на кнопке.Стрелочная функция используется в window.setInterval, потому что она автоматически привязывает это снаружи, поэтому нет необходимости сначала сохранять это.

Эффект следующий:

Но есть некоторые проблемы с этой кнопкой:

  • Через 1 секунду после нажатия кнопки обратный отсчет начинается сразу с 59 секунды, а 60 в середине уже нет.
  • Вы также можете нажать на обратный отсчет
  • Обратный отсчет еще не сброшен

Далее нам нужно продолжать улучшать функцию countDown для решения этих проблем.

countDown () {
  this.content = this.totalTime + 's后重新发送'  //这里解决60秒不见了的问题
  let clock = window.setInterval(() => {
    this.totalTime--
    this.content = this.totalTime + 's后重新发送'
    if (this.totalTime < 0) {         //当倒计时小于0时清除定时器
        window.clearInterval(clock)
        this.content = '重新发送验证码'
        this.totalTime = 60
        }
  },1000)
},

Приведенный выше код решает проблему отсутствия 60. В то же время, когда totalTime меньше 0, таймер очищается, содержимое кнопки сбрасывается, а totalTime сбрасывается до 60 для следующего использования.

Эффект обратного отсчета 10 секунд:

Нашел баг, после нескольких нажатий скорость обратного разговора становится быстрее, потому что каждый щелчок будет запускать setInterval, а эти setIntervals будут уменьшать totalTime. Решение тоже очень простое: просто задушить его, то есть после первого нажатия кнопки код функции countDonw не может быть выполнен, и его можно выполнить повторно после окончания обратного отсчета.

data () {
    return {
      content: '发送验证码',
      totalTime: 10,
      canClick: true  //添加canClick
    }
}

...

countDown () {
  if (!this.canClick) return   //改动的是这两行代码
  this.canClick = false
  this.content = this.totalTime + 's后重新发送'
  let clock = window.setInterval(() => {
    this.totalTime--
    this.content = this.totalTime + 's后重新发送'
    if (this.totalTime < 0) {
      window.clearInterval(clock)
      this.content = '重新发送验证码'
      this.totalTime = 10
      this.canClick = true   //这里重新开启
    }
  },1000)
}

Добавьте к данным canClick, по умолчанию true, если canClick true, то код в countDown может выполняться, если false, то работать не будет. Установите для canClick значение false каждый раз, когда он выполняется, и меняйте его на true только после окончания обратного отсчета. Проблема только сейчас исчезла.

Здесь почти то же самое, но вы также можете настроить стиль:

<button class="button" :class="{disabled: !this.canClick}" @click="countDown">

...

.disabled{
  background-color: #ddd;
  border-color: #ddd;
  color:#57a3f3;
  cursor: not-allowed;  // 鼠标变化
}

Эффект:

Эта кнопка обратного отсчета очень проста, но когда я писал ее впервые, она была очень запутанной, и в то время я не знал концепции дросселирования функций, и я не знал, почему обратный отсчет был бы быстрее, если бы Я нажимал несколько раз. Теперь я понимаю, что это написано здесь. Если есть какие-то недочеты, тоже надеюсь на критику и исправление!

Это моя шестая статья о Наггетс, спасибо за просмотр!