uview 自定义数字支付键盘功能

uview 自定义数字支付键盘功能

作为一个电商的项目，支付功能是必备的，自定义数字支付键盘也是对应的。
如果是用微信或者支付宝支付，则在支付时，会自动弹出数字键盘。

现在来看看微信和支付宝的支付数字键盘的样式吧……

好久没有用支付宝给人转账或者发红包了，支付宝的页面竟然有了这么多选项，真好……

如果要自己做支付页面，则就需要自定义支付数字键盘了，此处用uview中的键盘组件来实现。
效果如下：

uview keyboard官网链接：.html

keyboard组件(支持数字/身份证/车牌号三种)

<template><view><u-keyboard ref="uKeyboard" mode="car" v-model="show"></u-keyboard><u-button @click="show = true">打开</u-button></view>
</template><script>export default {data() {return {show: false}}}
</script>

keyboard的基本使用

键盘的类型——mode

通过mode参数定义键盘的类型，
mode = number (默认值)为数字键盘，此时顶部工具条中间的提示文字为"数字键盘"
mode = car为汽车键盘，此时顶部工具条中间的提示文字为"车牌号键盘"
mode = card为身份证键盘，此时顶部工具条中间的提示文字为"身份证键盘"

控制键盘顶部的工具条——tooltip/tips/show-tips/cancelBtn/confrimBtn

通过tooltip参数配置是否显示显示顶部的工具条，默认为true
通过tips参数修改工具条中间的提示文字
通过show-tips可以控制是否显示工具条中间的文字
通过cancelBtn参数配置是否显示工具条左边的"取消"按钮
通过confirmBtn参数配置是否显示工具条右边的"完成"按钮

是否显示键盘的点(".")按键——dot-enabled

该按键通过dot-enabled(默认为true)参数配置，只在"mode = number"时生效，因为车牌号和身份证键盘，用不到"."这个按键

是否打乱按键的顺序——random

如果配置random参数为true的话，每次打开键盘，按键的顺序都是随机的，该功能默认是关闭的

键盘的弹出与收起——v-model

v-model绑定一个值为布尔值的变量控制键盘的弹出与收起
注意：如果一进入页面就要打开键盘，需要在onReady生命周期函数中触发键盘的弹出和关闭，如果放在onLoad生命周期函数中，此时键盘组件还没有创建完成，如果要使用可以用this.$nextTick来处理。

<template><u-keyboard mode="number" v-model="show"></u-keyboard>
</template><script>export default {onReady() {// 如果想一进入页面就打开键盘，请在此生命周期调用this.show = true;},onLoad() {// 不应在此调用，因为此时u-keyboard组件尚未创建完成// this.show = true;}}
</script>

如何监听键盘按键被点击？

输入值是通过组件的change事件实现的，组件内部每个按键被点击的时候，组件就会发出一个change事件，回调参数为点击的按键的值。
通过backspace事件监听键盘退格键的点击，通过修改父组件的值实现退格的效果，见下方示例:
注意：点击退格键(也即删除键)不会触发change事件

键盘输入值的重点：

1. change触发时，可以通过this.value+=val的方式进行拼接展示
2. 退格键删除时，也就是backspage时,通过字符串的截取方式去掉最后一位。
   

<template><u-keyboard mode="number" @change="valChange" @backspace="backspace" v-model="show"></u-keyboard>
</template><script>export default {data() {return {value: '',show: false}},methods: {// 按键被点击(点击退格键不会触发此事件)valChange(val) {// 将每次按键的值拼接到value变量中，注意+=写法this.value += val;console.log(this.value);},// 退格键被点击backspace() {// 删除value的最后一个字符if(this.value.length) this.value = this.value.substr(0, this.value.length - 1);console.log(this.value);}}}
</script>

是否显示遮罩——mask

当您使用键盘时，可能会不想显示遮罩，这时可以配置mask参数为false即可
mask-close-able:是否允许点击遮罩收起键盘

是否开启底部安全区适配——safe-area-inset-bottom

部分手机比如苹果手机部分型号底部会有条黑线，如果不进行处理，则弹窗的部分内容会被遮挡，而且点击弹窗底部的按钮时会误触发，因此有个专门针对这个问题的底部安全区，设置为true，则会将弹窗部分抬高。

案例代码

<template><view><view class="u-padding-40"><u-button type="success" @click="showPop(true)"><u-icon name="red-packet"></u-icon><text class="u-padding-left-10">发送1.00元红包</text></u-button></view>		<u-keyboard default=""ref="uKeyboard" mode="number" :mask="true" :mask-close-able="false":dot-enabled="false" v-model="show":safe-area-inset-bottom="true":tooltip="false"@change="onChange"@backspace="onBackspace"><view><view class="u-text-center u-padding-20 money"><text>1.00</text><text class="u-font-20 u-padding-left-10">元</text><view class="u-padding-10 close" data-flag="false" @tap="showPop(false)"><u-icon name="close" color="#333333" size="28"></u-icon></view></view><view class="u-flex u-row-center"><u-message-input mode="box" :maxlength="6":dot-fill="true"v-model="password":disabled-keyboard="true"@finish="finish"></u-message-input></view><view class="u-text-center u-padding-top-10 u-padding-bottom-20 tips">支付键盘</view></view></u-keyboard></view>
</template><script>export default {data() {return {show:false,password:''}},onLoad() {},methods: {onChange(val){if(this.password.length<6){this.password += val;}if(this.password.length>=6){this.pay();}},onBackspace(e){if(this.password.length>0){this.password = this.password.substring(0,this.password.length-1);}},pay(){uni.showLoading({title:'支付中'})setTimeout(()=>{uni.hideLoading();this.show = false;uni.showToast({icon:'success',title:'支付成功'})},2000);},showPop(flag = true){this.password = '';this.show = flag;},finish(){console.log(11111)}}}
</script><style lang="scss">.money{font-size: 80rpx;color: $u-type-warning;position: relative;.close{position: absolute;top: 20rpx;right: 20rpx;line-height: 28rpx;font-size: 28rpx;}}.tips{color:$u-tips-color;}
</style>