uniapp自定义输入框，实现验证码输入框、密码输入框、兼容微信小程序
<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=" || == 0">{{}}
</view>
<view class="get-code" v-else>{{}}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 == && 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: {
// 监听倒计时
'': {
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>