前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input， 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13166效果图如下：
cc-defineKeyboard使用方法
/** * 唤起键盘 */onPayUp() {this.$refs.CodeKeyboard.show();},/*** 支付键盘回调* @param {Object} val */KeyInfo(val) {if (val.index >= 6) {return;}// 判断是否输入的是删除键if (val.keyCode === 8) {// 删除最后一位this.passwordArr.splice(val.index + 1, 1)}// 判断是否输入的是.else if (val.keyCode == 190) {// 输入.无效} else {this.passwordArr.push(val.key);}uni.showModal({title: '温馨提示',content: '输入密码是 = ' + JSON.stringify(this.passwordArr)})}HTML代码实现部分
请输入6位支付密码请设置6位支付密码请确认6位支付密码= 1">●= 2">●= 3">●= 4">●= 5">●= 6">●忘记支付密码？export default {components: {},data() {return {AffirmStatus: 1,passwordArr: [],oldPasswordArr: [],newPasswordArr: [],afPasswordArr: [],};},onLoad() {},methods: {/*** 唤起键盘*/onPayUp() {this.$refs.CodeKeyboard.show();},/*** 支付键盘回调* @param {Object} val*/KeyInfo(val) {if (val.index >= 6) {return;}// 判断是否输入的是删除键if (val.keyCode === 8) {// 删除最后一位this.passwordArr.splice(val.index + 1, 1)}// 判断是否输入的是.else if (val.keyCode == 190) {// 输入.无效} else {this.passwordArr.push(val.key);}uni.showModal({title: '温馨提示',content: '输入密码是 = ' + JSON.stringify(this.passwordArr)})// 判断是否等于6if (this.passwordArr.length === 6) {this.passwordArr = [];this.AffirmStatus = this.AffirmStatus + 1;}// 判断到哪一步了if (this.AffirmStatus === 1) {this.oldPasswordArr = this.passwordArr;} else if (this.AffirmStatus === 2) {this.newPasswordArr = this.passwordArr;} else if (this.AffirmStatus === 3) {this.afPasswordArr = this.passwordArr;} else if (this.AffirmStatus === 4) {console.log(this.oldPasswordArr.join(''));console.log(this.newPasswordArr.join(''));console.log(this.afPasswordArr.join(''));uni.showToast({title: '修改成功',icon: 'none'})setTimeout(() => {uni.navigateBack();}, 2000)}this.$forceUpdate();}}}$base: orangered; // 基础颜色.page {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: #FFFFFF;}.pay-title {display: flex;align-items: center;justify-content: center;width: 100%;height: 200rpx;text {font-size: 28rpx;color: #555555;}}.pay-password {display: flex;align-items: center;width: 90%;height: 80rpx;margin: 20rpx auto;border: 2rpx solid $base;.list {display: flex;align-items: center;justify-content: center;width: 16.666%;height: 100%;border-right: 2rpx solid #EEEEEE;text {font-size: 32rpx;}}.list:nth-child(6) {border-right: none;}}.hint {display: flex;align-items: center;justify-content: center;width: 100%;height: 100rpx;text {font-size: 28rpx;color: $base;}}