frontend/examking-app/plugins/uview-ui/components/u-verification-code/u-verification-code.vue

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<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: String,
				default: 'X秒重新获取'
			},
			// 倒计时结束时的提示
			endText: {
				type: String,
				default: '重新获取'
			},
			// 是否在H5刷新或各端返回再进入时继续倒计时
			keepRunning: {
				type: Boolean,
				default: false
			},
			// 为了区分多个页面，或者一个页面多个倒计时组件本地存储的继续倒计时变了
			uniqueKey: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				secNum: this.seconds,
				timer: null,
				canGetCode: true, // 是否可以执行验证码操作