Vue でカウントダウンボタンの効果を作る-jsチュートリアル-php.cn

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

php中世界最好的语言

リリース： 2018-06-07 10:38:21

オリジナル

3791 人が閲覧しました

今回は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: &#39;发送验证码&#39;,
   totalTime: 10,
   canClick: true //添加canClick
  }
}
...
countDown () {
 if (!this.canClick) return  //改动的是这两行代码
 this.canClick = false
 this.content = this.totalTime + &#39;s后重新发送&#39;
 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; // 鼠标变化
}

ログイン後にコピー

効果: