vue实现获取验证码

Posted 2023-04-18

参考技术A <template>

<view>

<input type="text" class="mis-mg-t-05" placeholder="请输入验证码" />

<text v-if="changess" @click="codeClick" >获取验证码</text>

<text v-else @click="codeClick" :disabled="disabled" ><text>59</text>S后重试</text>

</view>

</template>

<script>

data()

return:

//获取验证码

showText:true,

second:59,

disabled:false,

changess:true,



,

methods:

//调用接口成功之后

this.changess = false;

this.disabled = true

// console.log("1")

  this.showText = false

  var interval = setInterval(() =>

  --this.second

  , 1000)

  setTimeout(() =>

  clearInterval(interval)

  this.showText = true

  this.second = 59

  this.disabled = false

  this.changess = true;

  , 60000)



</script>

前端验证码的实现,vue+webpack

　　前端就是用的现在流行的vue+webpack.

　　实现还是蛮简单的直接贴代码吧!

      (1)页面:

　　

　　(2)载入页面时先获取一个验证码图片,验证码点击是也会重新获取一张新的图片

　　

      (3) 所有的接口都写在api.js中,在图片地址后加上时间可以重新出发请求

      // 引入api.js

　　

      // 接口在api.js中的写法

　　

      // 函数