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>
本文暂时没有评论,来添加一个吧(●'◡'●)