前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input
前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input， 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13166效果图如下：
cc-defineKeyboard
使用方法
<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></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代码实现部分
<template>
<view >
<view>
<view >
<text v-show="AffirmStatus === 1">请输入6位支付密码</text>
<text v-show="AffirmStatus === 2">请设置6位支付密码</text>
<text v-show="AffirmStatus === 3">请确认6位支付密码</text>
</view>
<view@click="onPayUp">
<view >
<text v-show="passwordArr.length >= 1">●</text>
</view>
<view >
<text v-show="passwordArr.length >= 2">●</text>
</view>
<view >
<text v-show="passwordArr.length >= 3">●</text>
</view>
<view >
<text v-show="passwordArr.length >= 4">●</text>
</view>
<view >
<text v-show="passwordArr.length >= 5">●</text>
</view>
<view >
<text v-show="passwordArr.length >= 6">●</text>
</view>
</view>
<view >
<text>忘记支付密码？</text>
</view>
</view>
<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>
</view>
</template>
来源:https://www.cnblogs.com/ccVue/p/17498718.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！
页:
[1]