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

vant weapp小程序端控件目前是没有PasswordInput，NumberKeyboard的。实现效果：

 

数字键盘组件代码（keyboard.wpy）：

<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>

　　密码提示框组件代码（pswInput.wpy）：

<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>