前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input

爱心搬运

前端Vue自定义支付密码输入键盘Keyboard和支付设置输入框Input， 下载完整代码请访问uni-app插件市场地址：https://ext.dcloud.net.cn/plugin?id=13166

效果图如下：

cc-defineKeyboard

使用方法

1. <cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>
3. /** * 唤起键盘 */
5. onPayUp() {
7. this.$refs.CodeKeyboard.show();
9. },
11. /*** 支付键盘回调* @param {Object} val */
13. KeyInfo(val) {
15. if (val.index >= 6) {
17. return;
19. }
21. // 判断是否输入的是删除键
23. if (val.keyCode === 8) {
25. // 删除最后一位
27. this.passwordArr.splice(val.index + 1, 1)
29. }
31. // 判断是否输入的是.
33. else if (val.keyCode == 190) {
35. // 输入.无效
37. } else {
39. this.passwordArr.push(val.key);
41. }
43. uni.showModal({
45. title: '温馨提示',
47. content: '输入密码是 = ' + JSON.stringify(this.passwordArr)
49. })
51. }

复制代码

HTML代码实现部分

1. <template>
3. <view >
5. <view>
7. <view >
9. <text v-show="AffirmStatus === 1">请输入6位支付密码</text>
11. <text v-show="AffirmStatus === 2">请设置6位支付密码</text>
13. <text v-show="AffirmStatus === 3">请确认6位支付密码</text>
15. </view>
17. <view  @click="onPayUp">
19. <view >
21. <text v-show="passwordArr.length >= 1">●</text>
23. </view>
25. <view >
27. <text v-show="passwordArr.length >= 2">●</text>
29. </view>
31. <view >
33. <text v-show="passwordArr.length >= 3">●</text>
35. </view>
37. <view >
39. <text v-show="passwordArr.length >= 4">●</text>
41. </view>
43. <view >
45. <text v-show="passwordArr.length >= 5">●</text>
47. </view>
49. <view >
51. <text v-show="passwordArr.length >= 6">●</text>
53. </view>
55. </view>
57. <view >
59. <text>忘记支付密码？</text>
61. </view>
63. </view>
67. <cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>
69. </view>
71. </template>

复制代码

来源:https://www.cnblogs.com/ccVue/p/17498718.html
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！