foreword
In mobile or small program projects, verification code input boxes and password input boxes are also very common. Today we will achieve such an effect.
image display
Code
Here I am a compatible WeChat applet implemented with uniapp.
If you need WeChat applets, you can also refer to this case, and the implementation ideas are the same.
<template>
<view class="index">
<view class="content">
<view class="phone-item">
<!-- 手机号输入框 -->
<input type="number" class="phone-input" v-model="phone" placeholder="请输入手机号">
<!-- 发送验证码按钮 -->
<view class="get-code" @click="getCode" v-if="codeBtn.isCode || codeBtn.codeNumber == 0">{
{codeBtn.codeName}}
</view>
<view class="get-code" v-else>{
{codeBtn.codeNumber}}s</view>
</view>
<view class="input-list">
<!-- input输入框 -->
<input class="input-item" v-if="focus" adjust-position="false" auto-blur="true" @blur="inputCodeBlur"
@input="inputCode" :focus="focus" v-model="code" @focus="inputFocus" type="number" oneTimeCode
maxlength="6" />
<!-- 验证码输入框 -->
<view class="code-list" @click="focusClick">
<view class="code-item" v-for="(item,index) in 6" :key="index"
:style="(index == code.length && focus ? 'border-color:#3c9cff;':'')">{
{code[index]}}</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
phone: '', // 手机号
timer: null, // 定时器
codeBtn: {
// 按钮状态切换
codeName: '获取验证码', // 状态名称
codeNumber: 2, // 倒计时秒数
isCode: true // 是否获取验证码
},
code: '', // 验证码字段
focus: false, // input是否聚焦
}
},
watch: {
// 监听倒计时
'codeBtn.codeNumber': {
handler(val) {
// 这里监听用户输入完完整的验证码，去调接口验证。
if (val == 0) {
this.codeBtn.codeName = '重新获取'
clearInterval(this.timer)
}
}
}
},
methods: {
// 获取验证码
getCode() {
this.codeBtn.isCode = false
this.codeBtn.codeNumber = 2
this.timer = setInterval(() => {
if (this.codeBtn.codeNumber == 0) {
clearInterval(this.timer)
return
}
this.codeBtn.codeNumber--
}, 1000)
},
// 点击聚焦输入框
focusClick() {
this.focus = true
},
// 输入框失去焦点
inputCodeBlur(e) {
let value = e.detail.value
this.focus = false
},
// 输入框聚焦时触发（没用到）
inputFocus(e, height) {
console.log(e)
},
// 输入框内容变化事件
inputCode(e) {
let value = e.detail.value
this.code = value
},
}
}
</script>
<style lang="scss" scoped>
.index {
padding: 30rpx;
.content {
padding: 20rpx;
.phone-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30rpx;
.phone-input {
width: calc(100% - 240rpx);
padding: 16rpx;
border-bottom: 1rpx solid #eee;
}
.get-code {
text-align: center;
width: 170rpx;
font-size: 26rpx;
border-radius: 50rpx;
padding: 10rpx 0rpx;
background: #3c9cff;
color: #fff;
}
}
.input-list {
display: flex;
align-items: center;
.input-item {
width: 0rpx;
}
.code-list {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.code-item {
width: 80rpx;
height: 80rpx;
text-align: center;
line-height: 80rpx;
border: 1rpx solid #eee;
border-radius: 10rpx;
}
}
}
}
}
</style>
Summarize
There is a small pit here.
If you do not change the view when you enter the value when you are previewing the WeChat applet on the real machine, I suggest you take a look at the version of your real machine when debugging, and change it to 2.0. You can see here for details
. article: Wechat applet real machine debugging @input does not take effect