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

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等 。

本文给大家介绍的组件：

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

阅读全文下载完整组件代码请关注微信公众号： 前端组件开发

 

效果图如下：

 

# 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代码实现部分

```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>

```