uView1.0 解决验证码倒计时组件Props: keep-running刷新后不生效

uView1.0 中验证码倒计时组件keep-running设置无效解决方案
在这里插入图片描述

1.刷新后使KeepRunning生效

这是uView1.0 GitHub仓库中的某个人提供的。

uView1.0 解决方案Issue

在这里插入图片描述
虽然 uView1.0 没很多人去使用了。但是会为了维护旧项目产生这样的问题。官方对 uView1.0 维护持续到 “2023-03-27” 最后一次更新日志已经没有调整了。所以上述需要手动更改验证码组件源码内容。或者使用 uView2.0 全新版本。

2.其它问题

这个问题的产生是因为修改了上述源码后且将验证码组件放在二级或多级页面中(非首页)。频繁返回并进入旧极有可能导致。例如以下展示例子:

在并未点击 “获取验证码” 时,重新进入页面会自动进入验证码操作。对验证码组件源码重新审查后:
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/ad26805b2edd4392ada4336d3f459029.png

组件销毁后调用保存验证码当前时间到Storage中;但是this.timer为空;会直接return不走下面逻辑。
但是当改了第一个问题时(使keep-running生效),去掉了 “!this.timer”,所以 this.timer = null的时候也进入了下方逻辑保存了验证码组件时间。导致再次进入页面时获取到了缓存从而自动有了时间。

在这里插入图片描述

涉及到的还有其他方法的调用。这里并未过多详细讲解。

在组件销毁时对 timer 判断,不为空时再去触发保存缓存操作即可解决。
在这里插入图片描述

3.解决问题

复制下方代码粘贴到 验证码组件 源码中可以直接解决。
验证码组件源码位置位于 uView-ui/components/u-verification-code

<template>
	<view class="u-code-wrap">
		<!-- 此组件功能由js完成,无需写html逻辑 -->
	</view>
</template>

<script>
	/**
	 * verificationCode 验证码输入框
	 * @description 考虑到用户实际发送验证码的场景,可能是一个按钮,也可能是一段文字,提示语各有不同,所以本组件 不提供界面显示,只提供提示语,由用户将提示语嵌入到具体的场景
	 * @tutorial https://www.uviewui.com/components/verificationCode.html
	 * @property {Number String} seconds 倒计时所需的秒数(默认60)
	 * @property {String} start-text 开始前的提示语,见官网说明(默认获取验证码)
	 * @property {String} change-text 倒计时期间的提示语,必须带有字母"x",见官网说明(默认X秒重新获取)
	 * @property {String} end-text 倒计结束的提示语,见官网说明(默认重新获取)
	 * @property {Boolean} keep-running 是否在H5刷新或各端返回再进入时继续倒计时(默认false)
	 * @event {Function} change 倒计时期间,每秒触发一次
	 * @event {Function} start 开始倒计时触发
	 * @event {Function} end 结束倒计时触发
	 * @example <u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
	 */
	export default {
   
		name: "u-verification-code",
		props: {
   
			// 倒计时总秒数
			seconds: {
   
				type: [String, Number],
				default: 60
			},
			// 尚未开始时提示
			startText: {
   
				type: String,
				default: '获取验证码'
			},
			// 正在倒计时中的提示
			changeText: {
   
				type
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

狗头程序员|

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值