uniapp 实现验证码输入框
前言
在实现页面的时候验证码输入的场景是比较常见的，如果使用一些前端 UI 组件会有这样的组件，可一些情况下需要自己去实现。比如小程序，如果过多依赖组件库，在一个小程序中仅使用一个组件库还好，引用组件多了会受到包大小的限制打包不了，所以一些效果和样式能自己写尽量自己写（仅限简单的，不建议重复造车）。
我们今天要分享的验证码输入框就是比较简单的一种实现，若为了它去引一个组件到工程中是不值得的，占空间。所以今天我动手实现了一个，供大家借鉴参考。
正文
话不多说，我们先看效果：
Dom 部分
查看 HTML 代码
<view class="phone_code">
<text class="phone_code_label">验证码已发送至</text>
<view class="phone_code_count">
<text class="phone_code_count_new">{{ newPhone }}</text>
<view v-if="isReget" class="phone_code_count_reget">
<button plain="true" type="warn" size="mini" @click="getCode">重新获取</button>
</view>
<text v-else class="phone_code_count_down">获取验证码<text>{{count}}</text>s</text>
</view>
<view class="phone_code_single">
<input class="phone_code_single_cinput"
adjust-position="false"
auto-blur="true"
@blur="codeNumBlurFun"
@input="codeNumInputFun"
:focus="focus"
v-model="code"
type="number"
maxlength="6"/>
<view class="phone_code_single_codeinput">
<view v-for="(item,index) in 6"
:key="index"
@click="codefocusFun(index)"
:style="(index == code.length? 'background-color:#FEF2F2;':'color: #313131;background-color:#eee')">
{{code[index]}}
</view>
</view>
</view>
<button :disabled="isCode" class="btn" type="warn" @click="submitFun()">确定</button>
</view>
JS 部分
查看 JavaScript 代码
<script>
export default {
data() {
return {
newPhone: "167****8898", // 当前显示电话
isReget: false, // 判断是否显示 ‘重新获取’按钮
timer: null, // 定时器
count: 60, // 时间
code: "", // 验证码
focus: true, // 焦点
isCode：true // ‘确定’按钮是否禁用
}
},
onLoad(options) {
this.getTimer() // 开启定时器
this.getCode() // 获取验证码
},
watch:{
count(val){
if(val==0){
this.isReget = true
clearInterval(this.timer)
}
},
},
methods: {
/**
* AUTHOR: 单乘风
* DESC: 定时器
* */
getTimer(){
this.timer = setInterval(()=>{
if(this.count==0){
clearInterval(this.timer)
uni.navigateBack({delta: 1})
return
}
this.count--
}, 1000)
},
/**
* AUTHOR: 单乘风
* DESC: 获取验证码
* */
getCode(){
console.log("获取验证码", this.newPhone)
if(this.count==0){
this.count = 60
this.isReget = false
this.getTimer()
}
},
/**
* AUTHOR: 单乘风
* DESC: 输入框输入事件
* */
codeNumInputFun(e){
let val = e.detail.value
this.code = val
if(val.length==6) this.isCode = false
else this.isCode = true
},
/**
* AUTHOR: 单乘风
* DESC: 输入框失去焦点事件
* */
codeNumBlurFun(e){
let val = e.detail.value
this.focus = false
if(val.length==6) this.isCode = false
else this.isCode = true
},
/**
* AUTHOR: 单乘风
* DESC: 输入框点击事件
* @param {Number} index 当前点击框索引
* */
codefocusFun(index){
this.focus = true
},
/**
* AUTHOR: 单乘风
* DESC: 按钮点击事件
* */
submitFun(){
console.log("确认更换手机号")
},
}
}
</script>
SCSS 部分
查看 CSS 代码
<style lang="scss" scoped>
.phone{
background-color: #FFF;
width: 100vw;
height: 100vh;
&_code{
padding: 30rpx;
&_label{
font-size: 30rpx;
color: #999;
}
&_count{
margin-top: 30rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 100rpx;
&_new{
color: #e64340;
font-size: 38rpx;
font-weight: bold;
}
&_down{
border: 1rpx solid #eee;
border-radius: 10rpx;
color: #999;
height: 60rpx;
line-height: 60rpx;
padding: 0 20rpx;
text{
margin-left: 10rpx;
}
}
}
&_single{
margin-top: 30rpx;
&_cinput{
position: fixed;
left: -100rpx;
width: 50rpx;
height: 50rpx;
}
&_codeinput{
margin: auto;
width: 650rpx;
height: 100rpx;
display: flex;
}
&_codeinput>view {
margin-top: 5rpx;
margin-left: 15rpx;
width: 86rpx;
height: 86rpx;
line-height: 86rpx;
font-size: 60rpx;
font-weight: bold;
color: #313131;
text-align: center;
border-radius: 10rpx;
}
&_codeinput>view:nth-child(1) {
margin-left: 0rpx;
}
}
}
}
</style>
总结
效果、代码如上，话要少叙，若对您有用请留下您的足迹，若写的有瑕疵也请不吝指教。
如上代码可以根据个人需求进行优化，我没有发起请求，方法已经建立了也已经注明，把自己的请求加入即可。
如果有不懂的欢迎留言交流。
