vue中验证码输入框

最新推荐文章于 2024-12-02 11:11:38 发布

WeChat624

最新推荐文章于 2024-12-02 11:11:38 发布

阅读量2.2k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_71879136/article/details/127852687

版权

本文介绍如何在Vue.js中创建一个验证码输入框组件，适用于身份证后四位和支付密码等场景。通过为每个输入框绑定函数操作，实现输入框的定制化功能。

摘要由CSDN通过智能技术生成

如这样的验证码输入框，要实现一个类似于这样的输入框，而且有几个页面都需要类似的输入框（输入身份证后四位/输入支付密码），就准备撸一个小组件。

原理：

对每个input输入输入框进行函数的操作，

代码如下：

<template>
	<view class="box">
		<view class="pay">
			<view>付款码</view>
			<view>请在下方输入4位付款码进行查询付款</view>
			<view>
				<input type="text" maxlength="1" :style=" firstFocus ? 'border: 1px solid #feb30f;' : '' "  v-model="first"  @focus='focus' :focus="firstFocus" @input="firstChange" />
				<input type="text" maxlength="1" :style=" secondFocus ? 'border: 1px solid #feb30f;' : '' " v-mode