基于vue实现图片验证码倒计时60s功能

要实现基于vue的图片验证码倒计时功能，我们可以按照以下步骤进行操作：

1. 安装必要的依赖

首先，我们需要安装以下依赖：

• vue：用于构建用户界面的渐进式框架
• vue-resource：用于发送http请求
• vue-countdown：用于实现倒计时功能

可以使用以下命令进行依赖安装：

npm install vue vue-resource vue-countdown --save

1. 导入依赖

在Vue组件中导入需要用到的依赖库：

<template>
  <div>
    <img :src="captcha" alt="Captcha" @click="getNewCaptcha()">
    <input type="text" v-model="captchaCode">
    <vue-countdown :countdown="countdown" @on-end-countdown="onEndCountdown"></vue-countdown>
  </div>
</template>

<script>
import VueCountdown from 'vue-countdown';
import VueResource from 'vue-resource';

export default {
  data() {
    return {
      captcha: '',
      captchaCode: '',
      countdown: 60
    }
  },

  components: {
    VueCountdown
  },

  created() {
    // 初始化
    this.getNewCaptcha();
  },

  methods: {
    // 获取新的验证码
    getNewCaptcha() {
      this.captcha = '/api/captcha?' + Math.random();
    },

    // 提交表单
    onSubmit() {
      console.log('提交表单！')
    },

    // 倒计时停止后的处理
    onEndCountdown() {
      console.log('倒计时结束！')
    }
  }
}
</script>

1. 获取验证码

当用户进入组件时，我们需要自动获取一张验证码图片。当用户点击图片时，再次获取一张随机的验证码图片：

getNewCaptcha() {
  this.captcha = '/api/captcha?' + Math.random();
}

这里使用的是随机数来生成一个新的验证码图片，确保每次请求时验证码图片都是随机的。

1. 提交表单

当用户填写完表单后，点击提交按钮即可提交表单内容。这里只是简单的打印提交表单这个操作：

onSubmit() {
  console.log('提交表单！');
}

1. 实现倒计时功能

我们使用vue-countdown组件来实现倒计时功能。首先需要在组件中导入：

import VueCountdown from 'vue-countdown';

然后在components中注册：

components: {
  VueCountdown
}

在Vue组件中加入模板：

<template>
  <div>
    <img :src="captcha" alt="Captcha" @click="getNewCaptcha()">
    <input type="text" v-model="captchaCode">
    <vue-countdown :countdown="countdown" @on-end-countdown="onEndCountdown"></vue-countdown>
  </div>
</template>

其中， :countdown="countdown" 显示倒计时时间， @on-end-countdown="onEndCountdown" 在倒计时结束时触发onEndCountdown()函数。

最后，我们实现倒计时结束后的处理：

// 倒计时停止后的处理
onEndCountdown() {
  console.log('倒计时结束！')
}

这样，我们就完成了基于Vue实现图片验证码倒计时60s功能的攻略。

下面给出两条更具体的示例说明：

1. 获取和显示验证码的示例

我们需要先初始化页面时获取一张验证码图片，并且在用户每次点击验证码图片时刷新图片：

<template>
  <div>
    <img :src="captcha" @click="refreshCaptcha()" alt="captcha">
    <input type="text" v-model="captchaCode">
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      captcha: '',
      captchaCode: '',
      imageUrl: '',
      interval: ''
    }
  },

  created() {
    this.refreshCaptcha();
  },

  methods: {
    refreshCaptcha() {
      axios.get('/api/captcha').then((response) => {
        this.captcha = response.data.img;
        this.imageUrl = '/api/captcha/' + response.data.seq;
      }).catch((error) => {
        console.error('获取验证码失败！', error);
      });
    }
  }
}
</script>

1. 实现倒计时功能的示例

我们可以在组件中使用vue-countdown组件来实现倒计时功能，示例代码如下：

<template>
  <div>
    <vue-countdown :countdown="countdown" @on-end-countdown="onEndCountdown"></vue-countdown>
  </div>
</template>

<script>
import VueCountdown from 'vue-countdown';

export default {
  data() {
    return {
      countdown: 60
    }
  },

  components: {
    VueCountdown
  },

  methods: {
    onEndCountdown() {
      console.log('倒计时结束！');
    }
  }
}
</script>