Vue でカウントダウン ボタンの効果を作る

今回はVueを使ってカウントダウンボタンのエフェクトを作成する方法を紹介します。Vueでカウントダウンボタンのエフェクトを作成する際の注意点は何ですか?実際の事例を見てみましょう。

プロジェクト開発では、確認コードを送信し、クリック後に 60 秒のカウントダウンが表示されるボタンによく遭遇します。これは非常に一般的ですが、非常に単純ですが、これを作成する際に注意すべき点がいくつかあります。ボタンをクリックしてください。今日は書いています。質問がある場合は、出てきて修正してください。

完成したエフェクトは次のとおりです:

エフェクトをより速く表示するために、時間を5秒に設定しました。ボタンをクリックすると、カウントダウンが表示され、同時にボタンがクリックできなくなり、スタイルが変更され、マウスホバーの外観も変更されます。

次に、コードを使用して実装します:

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

2 つのデータをデータに追加します。1 つは時間を記録するために使用され、もう 1 つはカウントダウン ボタンの特定のコンテンツを保持するために使用されます。 countDown 関数では、setInterval タイマーを使用して、totalTime を 1 秒ごとに 1 ずつ減らし、ボタンに表示される内容を変更します。 アロー関数は、外部の this を自動的にバインドするため、window.setInterval で使用されます。そのため、最初にこれを保存する必要はありません。

効果は以下の通りです:

しかし、このボタンにはまだいくつかの問題があります:

ボタンをクリックすると、1秒後の59秒から直接カウントダウンが始まり、真ん中の60が抜けています。
カウントダウン中もクリックできます
カウントダウンはまだクリアされていません

次に、これらの問題を解決するために、カウントダウン機能の改善を続ける必要があります。

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 = &#39;重新发送验证码&#39;
    this.totalTime = 60
    }
 },1000)
},

上記のコードは、60 が欠落している問題を解決すると同時に、totalTime が 0 未満の場合、シンクロナイザーをクリアし、ボタンの内容をリセットし、次回使用するために totalTime を 60 にリセットします。

10 秒のカウントダウンの効果:

複数回クリックすると、巻き戻しの速度が速くなります。これは、クリックするたびに setInterval が開始され、これらの setInterval によって 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 = &#39;重新发送验证码&#39;
   this.totalTime = 10
   this.canClick = true  //这里重新开启
  }
 },1000)
}

データに 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; // 鼠标变化
}

効果:

このカウントダウン ボタンは非常にシンプルですが、初めて書いたときは当時は機能スロットリングの概念を知りませんでした。

この記事の事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書: メニューツリー構造を作成する

vue.js+element-ui

JSを使用してユーザーの都市と地理的位置を取得する方法

以上がVue でカウントダウン ボタンの効果を作るの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。