머리말
모바일이나 소규모 프로그램 프로젝트에서는 인증코드 입력란과 비밀번호 입력란도 매우 흔한데 오늘은 그 효과를 보도록 하겠습니다.
이미지 디스플레이
암호
여기 저는 uniapp로 구현된 호환 가능한 WeChat 애플릿입니다.
WeChat 애플릿이 필요한 경우 이 사례도 참조할 수 있으며 구현 아이디어는 동일합니다.
<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>
요약하다
여기 작은 구멍이 있습니다.
실제 머신에서 WeChat 애플릿을 미리 볼 때 값을 입력할 때 보기를 변경하지 않으면 디버깅할 때 실제 머신의 버전을 살펴보고 변경하는 것이 좋습니다. 자세한 내용은 여기에서 확인할 수 있습니다
. 기사: Wechat 애플릿 실제 머신 디버깅 @input이 적용되지 않음