1.新建最贱 payKeyboard .vue
<template><view class="page-total" v-show="isShow"><view class="key-list"><view class="list" v-for="(item,index) in keyList" :class="{'special':item.keyCode==190||item.keyCode==8,'payMoney':item.keyCode==88}"@click="onKeyList(item,index)":key="item.keyCode"><text>{{item.key}}</text></view></view></view>
</template><script>export default {data() {return {isShow: false,keyList: [{key: 1,en: '',keyCode: 49,},{key: 2,en: 'ABC',keyCode: 50,},{key: 3,en: 'ABC',keyCode: 51,},{key: 4,en: 'ABC',keyCode: 52,},{key: 5,en: 'ABC',keyCode: 53,},{key: 6,en: 'ABC',keyCode: 54,},{key: 7,en: 'ABC',keyCode: 55,},{key: 8,en: 'ABC',keyCode: 56,},{key: '删除',en: 'Del',keyCode: 8,},{key: 9,en: 'ABC',keyCode: 57,},{key: 0,en: 'ABC',keyCode: 48,},{key: '确定',en: 'Pay',keyCode: 88,},],keyIndex: -1,};},props:{passwrdType: {type: String,default: 'pay'}},methods:{show(){this.isShow = true;},hide(){this.isShow = false;},/*** 密码键盘按下* @param {Object} item* @param {Number} index*/onKeyList(item,index){let KeyInfo = item; // 删除键if(KeyInfo.keyCode === 8 && this.keyIndex > -1){this.keyIndex--;}// 不是删除键if(KeyInfo.keyCode != 8){if(this.passwrdType == 'pay' && this.keyIndex >= 5){console.log('键盘');this.keyIndex = -1;return;}else{this.keyIndex = -1;}this.keyIndex++;}KeyInfo.index = this.keyIndex;this.$emit('KeyInfo',KeyInfo);}}}
</script><style scoped lang="scss">@import 'cc-payKeyboard.scss';
</style>
2.引用
<PayKeyboard ref=“codeKeyboard” passwrdType=“pay” @KeyInfo=“KeyInfo”>
import PayKeyboard from "@/components/payKeyboard.vue"<view>
<view>
<text v-show="AffirmStatus === 1">请设置6位支付密码</text>
<text v-show="AffirmStatus >= 2">请确认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>const codeKeyboard = ref(null)const passwordArr = ref([])const newPasswordArr = ref("")const AffirmStatus = ref("")const passwordArr = ref([])
//支付密码function onPayUp() {codeKeyboard.value.show();}/*** 支付键盘回调* @param {Object} val*/function KeyInfo(val) {if (val.index >= 6) {return;}// 判断是否输入的是删除键if (val.keyCode === 8) {// 删除最后一位passwordArr.value.splice(val.index + 1, 1)}// 判断是否输入的是.else if (val.keyCode == 190) {// 输入.无效} else {if(passwordArr.value.length<=6){passwordArr.value.push(val.key);}}if (val.keyCode == 88) {let pass = parseInt(passwordArr.value.join(""));console.log(pass)}// 判断是否等于6if (this.passwordArr.length === 6) {if (AffirmStatus.value === 1) {setTimeout(() => {passwordArr.value = [];AffirmStatus.value = AffirmStatus.value + 1;codeKeyboard..value.hide()}, 500)}}// 判断到哪一步了if (AffirmStatus.value === 1) {oldPasswordArr.value = parseInt(passwordArr.value.join(""));} else if (AffirmStatus.value >= 2) {afPasswordArr.value = parseInt(passwordArr.value.join(""));if (this.passwordArr.length === 6) {}}this.$forceUpdate();}
)
