uni-app自定义验证码

最新推荐文章于 2025-05-09 14:43:03 发布

置顶

lethargic1234

最新推荐文章于 2025-05-09 14:43:03 发布

阅读量944

点赞数

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_45961433/article/details/106855531

版权

本文介绍如何在uni-app中创建自定义验证码组件。通过引入validCode组件，并在main.js配置，然后在具体页面使用，实现验证码的个性化展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图
在这里插入图片描述

组件：validCode

<!-- 
自定义验证码输入、密码输入使用
使用方法：
maxlength：输入最大长度
isPwd：是否是密码模式
@finish：回调函数
 <validcode :maxlength="4" :isPwd="false" @finish="finish"></validcode>
 -->
<template>
	<view class="" style="">
		<view class="code-area">
			<view class="flex-box">
				<input
				    :value="val"
					type="number"
					focus="true"
					:maxlength="maxlength"
					class="hide-input"
					@input="getVal"
				/>
				<view v-bind:class="['item', { active: codeIndex == 1 }]">
					<view class="line"></view>
					<block v-if="isPwd && codeArr.length >= 1">
						<text class="dot">.</text>
					</block>
					<block v-else>	{
  { codeArr[0] ? codeArr[0] : ''}}</block>
				</view>
				<view v-bind:class="['item', { active: codeIndex == 2 }]">
					<view class&#