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

Posted 2023-06-23 ccVue

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

效果图如下：

cc-defineKeyboard

使用方法

<!-- ref:唯一ref  passwrdType：密码样式pay keyInfo：密码输入监测事件 -->

<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 class="page">

<view>

<view class="pay-title">

<text v-show="AffirmStatus === 1">请输入6位支付密码</text>

<text v-show="AffirmStatus === 2">请设置6位支付密码</text>

<text v-show="AffirmStatus === 3">请确认6位支付密码</text>

</view>

<view class="pay-password" @click="onPayUp">

<view class="list">

<text v-show="passwordArr.length >= 1">●</text>

</view>

<view class="list">

<text v-show="passwordArr.length >= 2">●</text>

</view>

<view class="list">

<text v-show="passwordArr.length >= 3">●</text>

</view>

<view class="list">

<text v-show="passwordArr.length >= 4">●</text>

</view>

<view class="list">

<text v-show="passwordArr.length >= 5">●</text>

</view>

<view class="list">

<text v-show="passwordArr.length >= 6">●</text>

</view>

</view>

<view class="hint">

<text>忘记支付密码？</text>

</view>

</view>

<!-- ref:唯一ref  passwrdType：密码样式pay keyInfo：密码输入返回事件 -->

<cc-defineKeyboard ref="CodeKeyboard" passwrdType="pay" @KeyInfo="KeyInfo"></cc-defineKeyboard>

</view>

</template>

<script>

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)

)

// 判断是否等于6

if (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();







</script>

<style scoped lang="scss">

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





</style>