小程序wepy2 模拟vant PasswordInput, NumberKeyboard 密码输入框控件

<template>
<div class="keyboard">
<div class="number-keyboard number-keyboard--default number-keyboard--safe-area-inset-bottom">
<div class="number-keyboard__body">
<i v-for="(item,index) of keys" :key="index" @click="keyTap(item)" class="hairline key" :class="{'key--gray':item.moreClass}">{{item.txt}}</i>
</div>
</div>
</div>
</template><script>
import wepy from '@wepy/core';
wepy.component({
data: {
keys: [
{ txt: 1, key: 1},
{ txt: 2, key: 2},
{ txt: 3, key: 3},
{ txt: 4, key: 4},
{ txt: 5, key: 5},
{ txt: 6, key: 6},
{ txt: 7, key: 7},
{ txt: 8, key: 8},
{ txt: 9, key: 9},
{ txt: '', key: '', moreClass: 'key--gray key--extra' },
{ txt: 0, key: 0},
{ txt: '删除', key: 'del', moreClass: 'key--gray key--delete' }
]
}, methods: {
keyTap(item){
if(item.key=='del'){
this.$emit('del',item);
}else if(/\d/.test(item.key)){
this.$emit('keyinput',item);
}
}
}, created() {}
});
</script>
<style lang="less" scoped>
.keyboard {
position: fixed;
bottom: 0;
width: 100%;
left: 0;
}
.number-keyboard__body {
position: relative;
box-sizing: border-box;
.key {
display: inline-block;
width: 33.33333333%;
height: 100rpx;
font-size: 40rpx;
font-style: normal;
line-height: 100rpx;
text-align: center;
vertical-align: middle;
// cursor: pointer;
position: relative;
// color:#777;
outline: none;
&.key--gray {
background-color: #ebedf0;
font-size: 30rpx;
}
&.key--active {
background-color: #f2f3f5;
}
}
.key::after {
position: absolute;
box-sizing: border-box;
content: ' ';
pointer-events: none;
top: -50%;
right: -50%;
bottom: -50%;
left: -50%;
border: 0 solid #ebedf0;
-webkit-transform: scale(0.5);
transform: scale(0.5);
border-width: 0.02667rem 0.02667rem 0 0;
}
}
</style>

<template>
<div class="inputRow">
<div class="pwdItem" v-for="(item,index) of length" :key="index" :class="{'active':index==arrPsw.length}">
<text class="txt">{{arrPsw[index]||""}}</text>
<div class="pcursor" v-if="index==arrPsw.length"></div>
</div>
</div>
</template><script>
import wepy from '@wepy/core';
wepy.component({
data: {
arrPsw: []
},
props: {
length: Number,
val: String
},
methods: {}, created() {},
computed: {
arrPsw() {
return (this.val && this.val.length && this.val.split('')) || [];
}
}
});
</script>
<style lang="less" scoped>
@keyframes cflicker {
0%{
opacity: 0;
height: 38%;
}
100%{
opacity: 1;
height: 40%;
}}
.inputRow {
display: flex;
justify-content: space-between;
padding: 22rpx 46rpx 0 46rpx;
.pwdItem {
width: 76rpx;
height: 76rpx;
line-height: 66rpx;
border-bottom: 4rpx solid #acabab;
position: relative;
&.active {
border-bottom: 4rpx solid #3ddbc7;
}
.txt {
font-size: 68rpx;
color: #4b5161;
vertical-align: top;
}
.pcursor {
position: absolute;
top: 50%;
left: 50%;
width: 2rpx;
height: 40%;
background-color: #323233;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
animation: 1s cflicker infinite ease-in-out;
}
}
}
</style>

<template>
<div class="register-sms">
<div class="header-tip">短信验证码发送至150****8991</div>
<p class="input-title">请输入验证码</p>
<div class="pswInput">
<pswInput length="{{6}}" :val="params.smsCode"></pswInput>
</div>
<p class="regTip re-send" v-if="!codeLoading">
<span @click="sendSMS">重新发送</span>
</p>
<p class="regTip timeNum" v-if="codeLoading">{{codeTime}}S</p> <keyboard @keyinput="onKeysInput" @del="onKeysDel"></keyboard>
</div>
</template><script>
import wepy from '@wepy/core';
wepy.page({
data: {
params: {
smsCode: '',
},
codeLoading: false, //验证码倒计时显示
codeTime: 60, //验证码倒计时
time1: null //清除定时器
}, methods: {
onKeysInput(item){
if(this.params.smsCode.length>5) return false;
this.params.smsCode = this.params.smsCode + item.key;
console.log(this.params.smsCode);
if(this.params.smsCode.length===6){
this.register();
}
},
register(){
console.log("register",this.params)
},
onKeysDel(item){
let temp = this.params.smsCode.split('')||[];
temp.pop();
this.params.smsCode = temp.join("");
}
}, created() {}
});
</script>
<config>
{
navigationBarTitleText: '验证码密码框',
usingComponents: {
"pswInput":"../components/pswInput",
"keyboard":"../components/keyboard",
}
}
</config>
<style scoped lang="less">
input::-webkit-input-placeholder {
color: #c2c2c2;
}
.register-sms {
text-align: center;
padding-top: 30px;
}
.header-tip {
font-size: 28rpx;
text-align: left;
margin-left: 48rpx;
color: #969798;
}
.input-title {
font-size: 28rpx;
color: #666;
margin-top: 96rpx;
margin-left: 44rpx;
margin-bottom: 10rpx;
text-align: left;
}
.van-password-input__security {
.li {
border-bottom: 4rpx solid #acbbab;
color: #4b5161;
font-size: 68rpx;
}
}
.regTip {
font-size: 28rpx;
text-align: right;
margin-top: 60rpx;
margin-right: 40rpx;
&.re-send {
color: #32d9c3;
}
&.timeNum {
color: #969798;
}
}
.pswInput {}
</style>