uView Code 验证码输入框

考虑到用户实际发送验证码的场景,可能是一个按钮,也可能是一段文字,提示语各有不同,所以本组件 不提供界面显示,只提供提示语,由用户将提示语嵌入到具体的场景

#平台差异说明

App(vue) App(nvue) H5 小程序

#基本使用

通过ref获取组件对象,再执行后面的操作,见下方示例。

  1. 通过seconds设置需要倒计的秒数(默认60)
  2. 通过ref调用组件内部的start方法,开始倒计时
  3. 通过监听change事件(从开始到结束之间,每秒触发一次)获得提示的文字,可能值如"获取验证码|12秒后重新获取|重新获取",可以自定义

注意:用户可能在倒计时的过程中点击获取验证码的按钮,组件内部提供了通过ref获取的canGetCode变量,在倒计时 过程中,该值为false,如果为false应该给予提示并不要再次向后端请求验证码,如果为true,则为获取验证码 之前,或者倒计结束之后,可以再次向后端请求验证码。

以下为完整示例,见如下:

复制代码
<template>
	<view class="wrap">
		<u-toast ref="uToast"></u-toast>
		<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" 
		@change="codeChange"></u-code>
		<u-button @tap="getCode">{{tips}}</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tips: '',
				// refCode: null,
				seconds: 10,
			}
		},
		onReady() {
			// 注意这里不能将一个组件赋值给data的一个变量,否则在微信小程序会
			// 造成循环引用而报错,如果你想这样做,请在非data中定义refCode变量
			// this.refCode = this.$refs.uCode;
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				uni.$u.toast('倒计时开始');
			}
		}
	}
</script>

<style lang="scss">
	.wrap {
		padding: 24rpx;
	}
</style>

copy

#自定义提示语

组件内部有内置的提示语,如获取验证码前的提示语为"获取验证码",用户可以通过参数配置自定义的提示:

  • 获取前,参数为start-text,默认值为"获取验证码"
  • 倒计时期间,参数为change-text,默认为"X秒重新获取",这里的"x"(大小写均可),将会被倒计的秒数替代
  • 倒计时结束,参数为end-text,默认值为"重新获取"

#保持倒计时

一般情况下,在H5刷新浏览器,或者各端返回再进入时,倒计时会消失,导致用户可以再次尝试获取验证码,虽然后端还会对此进行进一步的判断。

对于这种情况,uView给出了一个keep-running参数(默认为false),为true的时候,即使刷新浏览器,或者返回上一个页面, 倒计时依然会继续(如果还在倒计时间内的话)。

注意: 如果您的一个页面或者多个页面同时使用了多个此组件,为了防止多个组件之间,保存在本地的多个继续倒计时的变量之间互相干扰,可以配置 各个组件的unique-key为一个不重复的字符串,以作区分:

复制代码
/* A.vue */
<u-verification-code unique-key="page-a"></u-verification-code>

/* B.vue */
<u-verification-code unique-key="page-b"></u-verification-code>
相关推荐
HERR_QQ11 小时前
【unify】unify的微信小程序开发学习 (to be continued)
学习·微信小程序·小程序
mg66820 小时前
微信小程序入门实例_____快速搭建一个快递查询小程序
微信小程序·小程序
程序员柳21 小时前
基于微信小程序的校园二手交易平台、微信小程序校园二手商城源代码+数据库+使用说明,layui+微信小程序+Spring Boot
数据库·微信小程序·layui
Jyywww1211 天前
微信小程序学习笔记
笔记·学习·微信小程序
The_era_achievs_hero1 天前
微信小程序41~50
微信小程序·小程序
走,带你去玩1 天前
uniapp 微信小程序水印
微信小程序·小程序·uni-app
是一碗螺丝粉1 天前
🔥 微信H5视频自动播放终极秘籍:WeixinJSBridge竟是官方“通行证”?
微信小程序
一笑code1 天前
vue/微信小程序/h5 实现react的boundary
微信小程序·vue·react
菌菇汤1 天前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
666HZ6662 天前
微信小程序中scss、ts、wxml
微信小程序·小程序·scss