Vue 的发送验证码实际案例(update...)

1. 在 src/utils 目录 或者 src/libs 目录，封装一个 sendCode.js

sendCode.js:

// 发送验证码
// 封装的一个发送手机验证码的方法，60S倒计时
export const resend = function (t) {
  console.log(t)
  let num = 60
  let timer = setInterval(() => {
    num--
    t.innerHTML = num + '秒后重新获取'
    t.style.color = '#CCC'
    t.disabled = 'disabled'
    if (num === 0) {
      t.disabled = ''
      t.style.color = '#ffa600'
      t.innerHTML = '获取验证码'
      clearInterval(timer)
    }
  }, 1000)
}

2. 在组件中使用这个发送验证码的方法

在 views目录下，新建 send_code/send.code.vue 目录及组件。

send_code.vue:

<template>
  <div>
    <VNavbar></VNavbar>

    <div class="login_list">
      <span class="login_title">短信验证码：</span>
      <input type="text"
             class="auth_input"
             placeholder="输入验证码" />

      <!-- 通过v-show来控制该显示哪一行 -->
      <!-- 首先显示 .auth_text_blue 通过点击事件 getAuthCode 来获取手机验证码 -->
      <!-- 同时改变 sendAuthCode 的值， 隐藏自身，显示倒计时 .auth_text -->
      <span v-show="sendAuthCode"
            class="auth_text auth_text_blue"
            @click="getAuthCode">
        获取验证码
      </span>
      <span v-show="!sendAuthCode"
            class="auth_text">
        <span class="auth_text_blue">
          {{ auth_time }}
        </span>
        秒之后重新发送验证码
      </span>
      <span @click="fn($event)"
            class="btn2">
        获取验证码
      </span>
    </div>
  </div>
</template>

<script>
import _ from 'lodash'
import { resend } from '../../utils/sendCode'
export default {
  name: "send_code.vue",
  data () {
    return {
      sendAuthCode: true,
      auth_time: 0
    }
  },
  methods: {
    getAuthCode: function () {
      this.sendAuthCode = false;
      this.auth_time = 6;
      let auth_timetimer = setInterval(() => {
        this.auth_time--;
        if (this.auth_time <= 0) {
          this.sendAuthCode = true;
          clearInterval(auth_timetimer);
        }
      }, 1000);
    },
    //在点击这个方法的时候，做节流，比如60S之内才能点击一次
    fn: _.throttle(function (e) {
      //当前元素
      console.log(e);
      console.log(e.target);
      resend(e.target);
    }, 60000)
  }
}
</script>

<style lang="less" scoped>
.btn2 {
  border: 1px solid #cccccc;
  margin-left: 20px;
  padding: 0 5px;
}
</style>

3. 使用 Lodash 来做节流

安装：

npm i --save lodash

创建一个节流函数，比如在 60 秒内最多执行一次的函数。

在组件中的正确写法：

import _ from 'lodash'

export default {
    methods: {
        click: _.throttle(function () {
            console.log('hello')
            console.log(this)
        }, 60000)
    }
}

4. 参考

Vue中使用节流Lodash throttle