vue3实现密码输入框效果的示例代码
作者：来福福是小可爱！
这篇文章主要为大家详细介绍了如何利用vue3实现6位的密码输入框效果,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下
参考：vue下的密码输入框
注意：这是个半成品，有些问题（input输入框加了文字间距letter-spaceing，会导致输入到第6位的时候会往后窜出来一个空白框、光标位置页会在数字前面），建议不采用下面这种方式，用另外的（画六个input框更方便）
1.效果预览
2.实现思路
制作6个小的正方形div
用一个input覆盖在6个div上
给input设置透明（透明掉input）
3.源码
html
<div class="footerTextStyle">请输入6位数支付密码</div>
<div class="input-box">
<div class="code-item" :class="codeValue?.length == 0 && inputFocus ? 'code-item-active' : ''">{{ codeValue[0]
}}
</div>
<div class="code-item" :class="codeValue?.length == 1 && inputFocus ? 'code-item-active' : ''">{{ codeValue[1]
}}
</div>
<div class="code-item" :class="codeValue?.length == 2 && inputFocus ? 'code-item-active' : ''">{{ codeValue[2]
}}
</div>
<div class="code-item" :class="codeValue?.length == 3 && inputFocus ? 'code-item-active' : ''">{{ codeValue[3]
}}
</div>
<div class="code-item" :class="codeValue?.length == 4 && inputFocus ? 'code-item-active' : ''">{{ codeValue[4]
}}
</div>
<div class="code-item code-item-last" :class="codeValue?.length >= 5 && inputFocus ? 'code-item-active' : ''">{{ codeValue[5]
}}
</div>
<a-input class="input-code" v-model:value="codeValue" type="" @blur="codeInputBlur"
@focus="codeInputFocus" @input="codeInputChange" maxlength="6" />
</div>js
// 输入的6位密码
const codeValue = ref([])
const inputFocus = ref(false)
// 密码输入框
const codeInputChange = (e : any) => {
console.log('喵喵喵：', e.data);
if (e) {
// // 判断输入内容是否为数字
// if ((/^\+?[0-9][0-9]*$/).test(e)) {
// codeValue.value = e.data
// }
Array.from(codeValue.value).push(e.data)
} else {
codeValue.value = []
}
console.log('咩咩：', codeValue.value);
}
// 密码输入框失去焦点
const codeInputBlur = () => {
inputFocus.value = false
}
// 密码输入框获取到焦点
const codeInputFocus = () => {
inputFocus.value = true
}css
<style lang="scss" scoped>
// 密码输入框
.input-box {
position: relative;
margin: 4px 0px 20px 0px;
display: flex;
width: 290px;
height: 48px;
background-color: transparent;
border: none;
color: transparent;
}
// 透明input
.input-code {
position: absolute;
width: 290px;
height: 48px;
background-color: transparent;
border: none;
letter-spacing: 40px;
padding: 0px 20px;
}
.code-item {
width: 48px;
height: 48px;
text-align: center;
line-height: 48px;
border: 1px solid rgba(51,51,51,0.20);
border-right: none;
border-radius: 5px;
}
.code-item-last{
border-right: 1px solid rgba(51,51,51,0.20);
}
.code-item-active {
border: 1px solid #F23026;
box-sizing: border-box;
}
</style>到此这篇关于vue3实现密码输入框效果的示例代码的文章就介绍到这了,更多相关vue3密码输入框内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！