很多二维码都需要设置过期时间,比如扫码登录、付款二维码等。下面编程教程网小编给大家详细介绍一下实现代码!
具体代码如下:
export default {
name: "qrCode",
data() {
return {
codeStatus: 1, // 1- 未扫码 2-扫码通过 3-过期
effectiveTime: 30, // 有效时间
qrCodeTimer: null // 有效时长计时器
uid: '',
time: ''
};
},
methods: {
// 轮询获取二维码状态
getQcodeStatus() {
if(!this.qsCodeTimer) {
this.qrCodeTimer = setInterval(()=> {
// 二维码过期
if(this.effectiveTime <=0) {
this.codeStatus = 3
clearInterval(this.qsCodeTimer)
this.qsCodeTimer = null
return
}
this.effectiveTime--
}, 1000)
}
},
// 刷新二维码
refreshCode() {
this.codeStatus = 1
this.effectiveTime = 30
this.qsCodeTimer = null
this.generateORCode()
}
},
以上是编程学习网小编为您介绍的“如何设置二维码的时效性?(设置过期时间)”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
织梦狗教程
本文标题为:如何设置二维码的时效性?(设置过期时间)


基础教程推荐
猜你喜欢
- HTML+CSS 实现顶部导航栏菜单制作 2022-09-20
- vue正则验证 2023-10-08
- php-来自mysql的一列并将其显示为html中的两列 2023-10-26
- 解决ajax请求后台,有时收不到返回值的问题 2023-02-22
- vue3.0之Router的使用你了解吗 2024-03-09
- vue.js Prop 的大小写 (camelCase vs kebab-case) 2023-10-08
- ExtJs使用总结(非常详细) 2023-12-29
- 如何使用Java,AJAX使用Rest Web Services从MySQL数据库检索数据并将其放置在HTML表单中 2023-10-26
- 详解vue-cli脚手架build目录中的dev-server.js配置文件 2024-03-09
- jquery mobile移动端幻灯片滑动切换效果 2024-02-09